Image Hover Effect 1




Structure
<div class="card">
<div class="container" style="background: #9fa8da">
<img src="images/aaa.png">
<div class="overlay toBottom">
<div class="text">Hello World</div>
</div>
</div>
</div>
Just replace toBottom with your direction
Style
<style>
.card {
padding: 10px;
height: 300px; /* control height */
width: 400px; /* control width */
border-radius: 4px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
cursor:pointer;
}
.container {
background:#f5e7c2;
position: relative;
height:100%;
overflow:hidden;
}
/* Position your image to center with 100% height*/
.container img {
height: 100%;
display: block;
margin: auto;
}
.overlay {
position: absolute;
background-color: #ec407a;
overflow: hidden;
transition: .5s ease;
}
/* toBottom & toTop overlay */
.toTop{bottom: 0;}
.toBottom{top: 0;}
.toBottom, .toTop{
width:100%;
height:0;
left: 0;
}
.container:hover .toBottom, .container:hover .toTop {
height: 100%;
}
/* toRight & toLeft overlay */
.toLeft{right: 0;}
.toRight{left: 0;}
.toRight, .toLeft{
top:0;
width:0;
height:100%;
}
.container:hover .toRight, .container:hover .toLeft{
width: 100%;
}
/*Position the text*/
.text {
color: #fff;
font-size: 20px;
padding: 8px;
position: absolute;
top:50%;
width: 100%;
text-align: center;
}
</style>