How to slide a div over an image with CSS?

Question

On a webpage I am working on, I have a div which contains an image and another div. The inner div is initially set to

opacity: 0;

so that it's not visible. The inner div should appear over my image when hovered. I have achieved this, but now I want to improve upon it further by having the 'overlay' div (which appears with an opacity of 0.5) slide down gradually over the image. I could do it theoretically with JavaScript but on this occasion it must be a pure CSS solution. So far my solution just makes the overlay div appear gradually (it fades in) but does not slide down as I have never done this in CSS alone.

See the image below to understand further:

The 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 is with a slide down thanks to a height transition.

Improvements:

• Instead of opacity, use background: rgba(255,0,0,0.5) so that the contents of the overlay remain fully opaque.

• The transition property has been simplified to transition: all .5s

• The outside border is created with box-shadow and the black border is now created with the border property instead of padding.

• .overlay has a height of 0 and on hover it is given a height of 100%. It is stretched accross the image with the combination of left: 0 and right: 0

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

Complete 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 a 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
}