How to slide a div over an image with CSS? - html

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
}

Answer 3

Just a simple approach using the image as 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 slide 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 .overlay with a negative top position and then you can target the sibling element with the + selector and change the top position to positive.
Also you can change the transition timing by setting the transition-duration: 2s; to 2 sec.
.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/