Trying to do a slide-in effect using CSS3 animations-property:
https://jsfiddle.net/u0cx3zaa/
but is not working…
HTML:
<div class="bg">
<img src="https://dummyimage.com/200x200/000/fff.jpg&text=IMG" alt="">
<div class="box">
<div>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor</p>
</div>
</div>
</div>
CSS:
.bg {
max-width: 300px;
position: relative;
overflow: hidden;
}
img {
width: 100%;
display: block; /* remove blank space between img and .box */
}
.box {
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
position: absolute;
bottom: -130px;
animation: slide_up 1s easy;
animation-play-state: paused;
}
.bg:hover .box {
animation-play-state: running;
}
@keyframes slide_up {
0% {bottom: -130px;}
100% {bottom: 0px;}
}
Same animation using _transition-property_ is working
https://jsfiddle.net/pt9pkkar/
HTML is the same.
CSS:
.bg {
max-width: 300px;
position: relative;
overflow: hidden;
}
img {
width: 100%;
display: block; /* remove blank space between img and .box */
}
.box {
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
position: absolute;
bottom: -50%;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
.bg:hover .box {
bottom: 0%;
}
But… if you reduce the width of your browser the .box show up and overlap the image:
With transition works much better, if you want to reduce size of box when width change you need to set relative units like % for font size
.bg {
max-width: 300px;
position: relative;
overflow: hidden;
}
img {
width: 100%;
display: block; /* remove blank space between img and .box */
}
p {
font-size: 80%;
}
.box {
background-color: red;
padding-top: 1%;
padding-bottom: 1%;
text-align: center;
position: absolute;
bottom: -35%;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
.bg:hover .box {
bottom: 0;
}
Thanks for your reply but the .box still appear when reducing the browser size
https://jsfiddle.net/x6bhuj1v/ This fix the problem but how can I vertical-center text inside .box?
.bg {
max-width: 300px;
position: relative;
overflow: hidden;
}
img {
width: 100%;
display: block; /* remove blank space between img and .box */
}
.box {
background-color: red;
width: 100%;
height: 0%;
text-align: center;
position: absolute;
bottom: 0px;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
.bg:hover .box {
height: 30%;
}
this should solve it
.bg {
max-width: 300px;
position: relative;
overflow: hidden;
}
img {
width: 100%;
display: block; /* remove blank space between img and .box */
}
.box {
background-color: red;
width: 100%;
height: 50%;
text-align: center;
position: absolute;
bottom: -50%;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
.bg:hover .box {
bottom: 0;
}
.box div:first-child {
background-color: yellow;
position: absolute;
font-size: 8px;
height: inherit;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}