<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2 different hover effects - CodePen</title>
<style>
.hover-set1,.hover-set2 {
790px;
height: 300px;
margin: 0 auto;
margin-top: 25px;
}
.hover-set1 .hover-img {
250px;
height: 250px;
margin: 5px;
float: left;
background: #222;
position: relative;
}
.hover-set1 .hover-img .caption {
background: #DB485E;
padding: 15px 20px;
position: relative;
bottom: 0;
z-index:1000;
opacity: 0;
}
.hover-set1 .hover-img:hover .caption {
opacity: 1;
}
</style>
</head>
<body>
<div class="hover-set1">
<h1>HOVER DEMO 1</h1>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/6.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/2.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/3.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
</div>
<div class="hover-set1">
<h1>HOVER DEMO 2</h1>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/4.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/5.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/7.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
</div>
</body>
</html>