<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>2 different hover effects-codepen</title>
<style>
. Hover-set1,.hover-set2 {
width:790px;
height:300px;
margin:0 Auto;
margin-top:25px;
}
. Hover-set1. hover-img {
width: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;
Transform-origin:bottom Center;
opacity:0;
Transform:scale (1,-1) skew ( -10deg);
Transition:all 0.3s ease-in-out;
}
. Hover-set1. hover-img. Caption p {
font-family:arial;
font-size:14px;
line-height:18px;
Text-transform:uppercase;
padding-bottom:10px;
Color: #FFD789;
}
. Hover-set1. hover-img. Caption A {
Display:block;
font-family: ' Arial ';
font-size:14px;
Text-decoration:none;
Text-transform:uppercase;
Text-align:center;
padding:5px;
Color: #000;
Background: #FFD789;
Transition:all 0.5s Ease;
}
. Hover-set1. hover-img. caption A:hover {
Color: #FFD789;
Background: #222;
}
. Hover-set1. hover-img. img {
width:250px;
height:250px;
Overflow:hidden;
Transition:all 0.3s Ease;
}
. Hover-set1. hover-img img {
Transition:all 0.3s Ease;
}
. Hover-set1. Hover-img:hover. img {
Transform:scale (0.9,0.9);
}
. Hover-set1. Hover-img:hover. Caption {
Opacity:1;
Transform:scale (Skew) (0);
}
/* ======== */
. Hover-set2. hover-img {
width:250px;
height:250px;
margin:5px;
Float:left;
Background: #222/* #44FCF6 */;
position:relative;
Overflow:hidden;
Transition:all 0.5s Ease;
}
. Hover-set2. hover-img {
Transition:all 0.5s Ease;
}
. Hover-set2. hover-img. img {
Overflow:hidden;
Transition:all 0.5s Ease;
}
. Hover-set2. hover-img. Caption {
width:250px;
height:250px;
Display:block;
Background: #1BB5AF;
position:relative;
top:0;
Transform-origin:top Center;
Transform:rotate (180DEG);
Transition:all 0.5s Ease;
}
. Hover-set2. hover-img. Caption p {
padding:25px;
margin-top:25px;
font-family:arial;
font-size:16px;
line-height:24px;
Text-transform:uppercase;
Text-align:center;
}
. Hover-set2. hover-img. Caption A {
Display:block;
font-family:arial;
Text-transform:uppercase;
Text-decoration:none;
Text-align:center;
Background: #44FCF6;
Color: #444;
padding:10px 0;
Transition:all 0.5s Ease;
}
. Hover-set2. Hover-img:hover. Caption {
Transform:rotate (0DEG);
}
. Hover-set2. Hover-img:hover. img {
Transform:scale (0.9,0.9);
}
. Hover-set2. hover-img. caption A:hover {
Background: #222;
Color: #44FCF6;
}</style>
<body>
<div class= "Hover-set1" >
<div class= "Hover-img" >
<div class= "img" >
</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" >
</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" >
</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-set2" >
<div class= "Hover-img" >
<div class= "img" >
</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" >
</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" >
</div>
<div class= "caption" >
<p>lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href= "#" >more details</a>
</div>
</div>
</div>
</body>
CSS for floating effects