Sliding animation in CSS

HTML-CSS
1

Here is a picture of the mock up of my page.

44%20PM

Here are the effects I want to achieve:

  1. The whole div has a background image, and the bottom banner will appear on top of the whole div.
  2. The bottom banner will only be displayed, whenever your mouse hover onto the picture.\
  3. The bottom banner will slide in from below, then disappear whenever your mouse leaves the area.

I’ve tried to add in some CSS transition properties but couldn’t get it right.
Could need some help from you guys.

Thanks in advanced.

Also , what if I don’t know the exact height of the banner, can I still do this kind of effect?

2
  1. To make the background fill the whole page you need to make it and everything above it to have 100% height.
html,
body,
.card {
  height: 100%;
}
  1. To make the div appear only on hover, you’re doing it right. Make sure to set it to where you want it to appear after the transition is done, in our case, in the bottom.
.card:hover .project_description_div {
  bottom: 0px;
}
  1. To make it appear from below, then we need to put it there before any transition. The important piece is the bottom: -100px, it will stay there until someone hovers .card, then it will transition to bottom: 0.
.project_description_div {
  color: white;
  position: absolute;
  background: #23b6c7;
  width: 100%;
  transition: 1s;
  bottom: -100px;
}

Since that div will be below our page, the browser will display a scrollbar, so we can get there. In our case we don’t want it, so we hide it.

body {
  overflow: hidden;
}

I’ve forked your project, check this working version: https://codepen.io/ghukahr/pen/QZXrdL

If you don’t have the exact height of the banner, you’ll probably need javascript to get it and set our negative bottom to it.

1 Like
3

hmm. Thanks for the demonstration. I think that I didn’t express myself correctly.
actually my “end goal” is to create a project gallery section on my portfolio.
so there will be multiple “cards” on one page.

1st%20draft
1st%20draft926×929 85.8 KB

also (sorry if I am being nit picky) I found that in your example, if I narrow the width of the page, a part of the banner will show up automatically.

31%20AM
31%20AM622×1057 132 KB

I think what I am gonna do is to create a simpler example, then I will tag you, then you can show me what went wrong/right.

thank you for helping me do this.

4

@ghukahr okay… I have made another codepen page, and I am back to the sliding banner part.

and after I add the overflow:hidden to the parent div, I was be able to get the effect I wanted.

could you check it out and see whether I set everything right? I think I did.

5

now only thing left to do is how to use JS to figure out the length of the banner…

6

Good work! I think it shouldn’t be hard, especially if you expand the banner to be the same width of the parent. You get the width of the parent and set it as the left property of the banner.

Let me know when you’re finished.

1 Like
7

I will. this is only one part of my whole portfolio redo.
and I will tag you if I finished this section as well as the whole thing.
what I am doing right now are things I couldn’t even imagine I can do a few months ago.
2 months ago I can only do some single page site that basically have some images as well as text in it.