THUMBNAIL HOVER EFFECTS

Developer
Nikhil Krishnan
Size
4,784 Kb
Views
12,144
  1. THUMBNAIL HOVER EFFECTS Previews
  2. THUMBNAIL HOVER EFFECTS HTML Codes
  3. THUMBNAIL HOVER EFFECTS CSS Codes

How do I make an thumbnail hover effects?

Pure CSS3 image thumbnail hover effects, also we can easily change the grid item per row using by sass variable.. What is a thumbnail hover effects? How do you make a thumbnail hover effects? This script and codes were developed by Nikhil Krishnan on 19 November 2022, Saturday.

THUMBNAIL HOVER EFFECTS Previews
IQ Test

THUMBNAIL HOVER EFFECTS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>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="css/style.css">
</head>
<body> <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>
</body>
</html>

THUMBNAIL HOVER EFFECTS - Script Codes CSS Codes

@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;
}
THUMBNAIL HOVER EFFECTS - Script Codes
THUMBNAIL HOVER EFFECTS - Script Codes
Home Page Home
Developer Nikhil Krishnan
Username nikhil8krishnan
Uploaded November 19, 2022
Rating 4.5
Size 4,784 Kb
Views 12,144
Do you need developer help for THUMBNAIL HOVER EFFECTS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nikhil Krishnan (nikhil8krishnan) Script Codes
Name
Fixed table header
Canvas Paint
Responsive Material Form v.2
Cube Flipping Loader
My template
ICON TRANSFORMATION MENU
IOS glossy effect
Profile Theme
A Pen by Nikhil Krishnan
RESPONSIVE MATERIAL DESIGN CONTACT FORM
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!