It is very common to put thumbnails in the main page or index or category pages. Usually some texts or a title will come under that image. A wise way is to show the text when the user hover the image with an effect. The following code is one of the best codes in this field. The image is split and the texts are shown. Just try it!
HTML
<!-- This script got from www.devanswer.com -->
<div class="card">
<div class="img"> <span></span><span></span><span></span><span></span></div>
<div class="content">
<h2> MacBook Air</h2>
<h2>Lightness</h2>
<h4>The most loved Mac is about to make you fall in love all over again. Available in silver, space gray, and gold, the new thinner and lighter MacBook Air features a brilliant Retina display, Touch ID, the latest-generation keyboard, and a Force Touch trackpad</h4>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url("https://fonts.googleapis.com/css?family=Poppins");
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: #141E30;
background: -webkit-linear-gradient(to top, #243B55, #141E30);
background: linear-gradient(to top, #243B55, #141E30);
display: flex;
justify-content: center;
align-items: center;
font-family: "Poppins", sans-serif;
overflow: hidden;
}
.card {
border-radius: 16px;
width: 360px;
height: 360px;
background: url(http://devanswer.com/codes/files/thumbnail-split-on-hover.jpg);
position: relative;
overflow: hidden;
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.85);
}
.card:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0, 0, 0, 0.92);
}
.card .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
}
.card .img span {
width: 25%;
height: 100%;
background: url(http://devanswer.com/codes/files/thumbnail-split-on-hover.jpg);
transition: 0.5s;
}
.card .img span:nth-child(1) {
background-position: 0;
transition-delay: 0;
}
.card .img span:nth-child(2) {
background-position: 33.33333%;
transition-delay: 0.1s;
}
.card .img span:nth-child(3) {
background-position: 66.66666%;
transition-delay: 0.2s;
}
.card .img span:nth-child(4) {
background-position: 100%;
transition-delay: 0.3s;
}
.card:hover .img > span {
transform: translateY(-100%);
}
.card:hover .content {
transform: translateY(0%);
transition: 1s;
transition-delay: 0.1s;
}
.content {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
padding: 20px 20px;
width: 100%;
height: 100%;
transform: translateY(100%);
}