Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
.container {
position: relative;
width: 50%;
margin: 0 auto;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.left-col .overlay {
position: absolute;
bottom: 0;
right: 100%;
left: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
h2 {
margin-bottom: 0;
}
p {
margin-top: 0;
}
.top-col .overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.bottom-col .overlay {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}
.left-col.container:hover .overlay {
width: 100%;
right: 0;
}
.top-col.container:hover .overlay {
bottom: 0;
height: 100%;
}
.bottom-col.container:hover .overlay {
top: 0;
height: 100%;
}
.clearfix::before {
display: table;
content: " ";
}
.clearfix::after {
clear: both;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}
.container-f.clearfix {
width: 90%;
padding: 15px;
height: auto;
clear: both;
overflow: auto;
margin: 0 auto;
}
.col {
float: left;
width: 50%;
margin-top: 20px;
text-align: center;
}
@media (max-width: 768px){
.col {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container-f clearfix">
<div class="col">
<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="http://www.devanswer.com/img/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
<div class="col">
<h2>Slide in Overlay from the Left</h2>
<p>Hover over the image to see the effect.</p>
<div class="container left-col">
<img src="http://www.devanswer.com/img/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
<div class="col">
<h2>Slide in Overlay from the Top</h2>
<p>Hover over the image to see the effect.</p>
<div class="container top-col">
<img src="http://www.devanswer.com/img/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
<div class="col">
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container bottom-col">
<img src="http://www.devanswer.com/img/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>
