<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - THUMBNAIL HOVER EFFECTS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Thumbnail Hover effects
<small>Easily change the grid item per row using by sass variable.</small>
</h1>
<div class="grid-wrap">
<!-- demo 1-->
<a class="list-block" href="#">
<figure>
<img src="http://www.safarilink.com/images/lodges/photos/klz_thumb_2.jpg" alt="" />
<figcaption>
<h2>Thumbnail 01</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
<a class="list-block" href="#">
<figure>
<img src="http://www.miradatravelmedia.com/images/lodges/photos/ttt_thumb_1.jpg" alt="" />
<figcaption>
<h2>Thumbnail 02</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
<a class="list-block" href="#">
<figure>
<img src="http://thatcherkelley.com/photography/wp-content/uploads/2013/04/portfolio-thumb-Rainiers-Evening-Glow.jpg" alt="" />
<figcaption>
<h2>Thumbnail 03</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
<!-- demo 2-->
<a class="list-block demo-2" href="#">
<figure>
<img src="http://www.miradatravelmedia.com/images/lodges/photos/ttt_thumb_1.jpg" alt="" />
<figcaption>
<h2>Thumbnail 04</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
<a class="list-block demo-2" href="#">
<figure>
<img src="http://thatcherkelley.com/photography/wp-content/uploads/2013/04/portfolio-thumb-Rainiers-Evening-Glow.jpg" alt="" />
<figcaption>
<h2>Thumbnail 05</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
<a class="list-block demo-2" href="#">
<figure>
<img src="http://www.safarilink.com/images/lodges/photos/klz_thumb_2.jpg" alt="" />
<figcaption>
<h2>Thumbnail 06</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
<!-- demo 3 -->
<a class="list-block demo-3" href="#">
<figure>
<img src="http://www.safarilink.com/images/lodges/photos/klz_thumb_2.jpg" alt="" />
<figcaption>
<h2>Thumbnail 07</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
<a class="list-block demo-3" href="#">
<figure>
<img src="http://www.miradatravelmedia.com/images/lodges/photos/ttt_thumb_1.jpg" alt="" />
<figcaption>
<h2>Thumbnail 08</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
<a class="list-block demo-3" href="#">
<figure>
<img src="http://thatcherkelley.com/photography/wp-content/uploads/2013/04/portfolio-thumb-Rainiers-Evening-Glow.jpg" alt="" />
<figcaption>
<h2>Thumbnail 09</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</figcaption>
</figure>
</a>
</div>
<!-- follow me template -->
<div class="made-with-love">
Made with
<i>♥</i> by
<a target="_blank" href="https://codepen.io/nikhil8krishnan">Nikhil Krishnan</a>
</div>
<!-- partial -->
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900);
.grid-wrap {
padding: 1%;
}
.list-block {
float: left;
margin: 1%;
width: 31.33333%;
font-size: 0;
overflow: hidden;
}
.list-block figure {
position: relative;
display: block;
color: black;
text-align: center;
}
.list-block figure:after {
background: #fff;
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
content: '';
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transform: skew(-45deg) scaleX(0);
-ms-transform: skew(-45deg) scaleX(0);
transform: skew(-45deg) scaleX(0);
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.list-block figure:hover:after {
-webkit-transform: skew(-45deg) scaleX(1);
-ms-transform: skew(-45deg) scaleX(1);
transform: skew(-45deg) scaleX(1);
-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.list-block figure:hover figcaption h2,
.list-block figure:hover figcaption p {
-moz-transform: translate3d(0%, 0%, 0);
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.list-block figure:hover figcaption h2 {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
.list-block figure:hover figcaption p {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
.list-block img {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
max-width: 100%;
min-width: 100%;
-moz-transition: opacity 0.35s ease;
-o-transition: opacity 0.35s ease;
-webkit-transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
}
.list-block figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
.list-block h2,
.list-block p {
margin: 0;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
.list-block h2 {
padding: 0 30px 10px;
display: inline-block;
font-weight: 400;
text-transform: uppercase;
font-size: 24px;
}
.list-block p {
padding: 0 50px;
font-size: 14px;
text-transform: uppercase;
}
.demo-2 figure figcaption p {
margin-top: -45px;
}
.demo-2 figure:after {
-webkit-transform: skew(-45deg) scaleX(0);
-ms-transform: skew(-45deg) scaleX(0);
transform: skew(-45deg) scaleX(0);
}
.demo-2 figure:hover:after {
-webkit-transform: skew(45deg) scaleX(1);
-ms-transform: skew(45deg) scaleX(1);
transform: skew(45deg) scaleX(1);
}
.demo-2 figure:hover figcaption p {
margin-top: 0;
}
.demo-3 figure figcaption {
-moz-transform: translateY(-10%);
-ms-transform: translateY(-10%);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
.demo-3 figure figcaption h2,
.demo-3 figure figcaption p {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
.demo-3 figure:after {
-webkit-transform: skew(0deg) scaleX(1);
-ms-transform: skew(0deg) scaleX(1);
transform: skew(0deg) scaleX(1);
}
.demo-3 figure:hover:after {
-webkit-transform: skew(45deg) scaleX(0);
-ms-transform: skew(45deg) scaleX(0);
transform: skew(45deg) scaleX(0);
}
.demo-3 figure:hover figcaption {
-moz-transform: translateY(-10%);
-ms-transform: translateY(-10%);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
.demo-3 figure:hover img {
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.demo-3 figure img {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*----page styles---*/
* {
box-sizing: border-box;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
body {
background: #00d2ff;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #00d2ff, #3a7bd5);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #00d2ff, #3a7bd5);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Roboto', sans-serif;
}
h1 {
color: white;
padding: 4%;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
h1 small {
font-size: 18px;
display: block;
text-transform: none;
font-weight: 300;
margin-top: 5px;
}
.made-with-love {
margin-top: 30px;
padding: 10px;
font-size: 10px;
font-family: arial;
clear: left;
text-align: center;
color: #fff;
}
.made-with-love i {
font-style: normal;
color: #F50057;
font-size: 14px;
position: relative;
top: 2px;
}
.made-with-love a {
color: #fff;
text-decoration: none;
}
.made-with-love a:hover {
text-decoration: underline;
}