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>