How to shift a div over an image using CSS?

Question

On the webpage I'm working on, I have a div that contains an image and another div. The inner div is initially set to

opacity: 0; 

so that it is not visible. The inner div should appear above my image when it hangs. I have achieved this, but now I want to improve it further by getting the “overlay” div (which appears with an opacity of 0.5) gradually glides over the image. I could do it theoretically using JavaScript, but in this case it should be a pure CSS solution. So far, my solution just makes the overlay div appear gradually (it disappears), but does not slide down, since I have never done this only in CSS.

See the image below to understand further:

HTML:

 <div class="img"> <img class="squareImg" src="img1.jpg"/><div class="overlay"> tweet This <br> Buy This</div></div> <div class="img"> <img class="squareImg" src="img3.jpg"/></div> <div class="img"> </img></div> 

CSS

  .overlay{ position: absolute; width: 200px; overflow-y: hidden; transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); height: 200px; background-color: red; border: 1px solid white; top: 10px; left: 10px; opacity: 0; } .overlay:hover{ cursor:pointer; opacity: 0.5; z-index: 1; } .img{ position: relative; margin-bottom: 10px; border: 2px solid yellow; background-color: black; width: 200px; height: 200px; left: 50%; margin-left: -110px; padding: 10px; } 

Answer 1

Here it happens when you slide down due to the transition to height.

Improvements:

• Instead of opacity use background: rgba(255,0,0,0.5) so that the content of the overlay remains completely opaque.

• The transition property is simplified to transition: all .5s

• The outer border is created using the shadow of the window, and the black border is now created using the border property instead of filling.

• .overlay has a height of 0 and when hovering it sets the height to 100%. It is stretched along the image with a combination of left: 0 and right: 0

• There is no image size set, the <img> size now controls the size of the border and overlay, allowing different image sizes.

Full example

 .img { position: relative; border: 10px solid black; box-shadow: 0 0 0 2px yellow; display: inline-block; vertical-align: top; cursor: pointer; margin: 10px; } .overlay { position: absolute; top: 0; left: 0; right: 0; transition: all .5s; overflow: hidden; height: 0; background: rgba(255, 0, 0, 0); } .img:hover .overlay, .overlay:hover { height: 100%; background: rgba(255, 0, 0, 0.5); } .img > img { display: block;/* Prevent inline gap under image*/ } 

 <div class="img"> <img src="http://www.placehold.it/200" /> <div class="overlay">tweet This <br>Buy This</div> </div> <div class="img"> <img src="http://www.placehold.it/300" /> <div class="overlay">tweet This <br>Buy This</div> </div> 

Answer 2

You can just use simple transitions for this, rather than keyframe animation

Example: http://jsfiddle.net/realseanp/c4e08hy7/9/

HTML:

 <div class="holder"> <div class="info"> <span>All your info</span> <div class="overlay"></div> </div> </div> 

CSS

 .holder{ position:relative; height:200px; width: 200px; overflow: hidden; border:1px solid #000; z-index:3; } .info { box-sizing: border-box; height: 100%; padding: 20px; position: absolute; top: -100%; transition: top 0.5s ease 0s; width: 100%; z-index: 4; } .overlay { background: none repeat scroll 0 0 #000; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: -1; transition: 1s all; } .holder:hover .info{ top:0; } .holder:hover .overlay{ opacity: .85 } 

Answer 3

Just a simple approach using the image as a background:

 .img{ position: relative; background: none 50% / cover; width: 200px; height: 200px; margin: 0 auto; border: 10px solid #000; box-shadow: 0 0 0 2px yellow; } .overlay{ position: absolute; width: 100%; height: 0%; overflow: hidden; transition: all .5s cubic-bezier(0, 1, 0.5, 1); box-shadow: inset 0 0 0 1px white; background: rgba(255,0,0,0.4); /* Don't use opacity but rgba on bg */ } .img:hover .overlay{ height: 100%; } 

 <div class="img" style="background-image:url(//placehold.it/300x300/aba)"> <div class="overlay">Tweet This <br> Buy This</div> </div> 

Answer 4

If you need to push it down, you should use @keyframes:

 .overlay:hover{ -webkit-animation: slide 5s; /* Chrome, Safari, Opera */ animation: slide 5s; } @keyframes slide { from {height: 0px;} to {height: 200px;} } /* Chrome, Safari, Opera */ @-webkit-keyframes slide { from {height: 0px;} to {height: 200px;} } 

Answer 5

You can achieve this by setting the top-positioning option with a negative top position, and then you can adjust the target element with the + selector and change the top position to positive. You can also change the transition time by setting transition-duration: 2s; for 2 seconds.

  .overlay{ position: absolute; width: 200px; overflow-y: hidden; transition-property: all; transition-duration: 2s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); height: 200px; background-color: red; border: 1px solid white; top: -200px; left: 10px; opacity: 0; z-index:-1; } .squareImg:hover + .overlay, .overlay:hover { cursor:pointer; top:10px; opacity: 0.5; z-index: 1; } .img{ position:relative; height:200px; width: 200px; overflow: hidden; border:1px solid #000; z-index:3; margin-bottom: 10px; border: 2px solid yellow; background-color: black; left: 50%; margin-left: -110px; padding: 10px; } 

DEMO http://jsfiddle.net/a_incarnati/c4e08hy7/8/