This is a great code for thumbnail. Normally we have a grid of 6 photos, each of which is overlapped with one color. In hover mode and when we go on the photo, the color slowly disappears and the photo appears with its original color, and at the same time the photo is slightly zoomed. This attractive effect is used for thumbnail and doubles the beauty of the work, especially for sites that have an old theme can be a good option, of course, you can change the colors used for each photo to your liking. This is pure css and is very suitable for sites that have jquery or javascript restrictions or want to have a lightweight site.
HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald'>
<div class="container-fluid">
<h3>Pure CSS Picture Grid Color Overlay On Hover Zoom</h3>
<div class="row row1">
<div class="col-md-4 col-xs-4">
<div class="box box1">
<img src="http://devanswer.com/codes/files/overlay1.jpg">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="box box2">
<img src="http://devanswer.com/codes/files/overlay2.jpg">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="box box3">
<img src="http://devanswer.com/codes/files/overlay3.jpg">
</div>
</div>
</div>
<div class="row row2">
<div class="col-md-4 col-xs-4">
<div class="box box4">
<img src="http://devanswer.com/codes/files/overlay4.jpg">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="box box5">
<img src="http://devanswer.com/codes/files/overlay5.jpg">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="box box6">
<img src="http://devanswer.com/codes/files/overlay6.jpg">
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
font-family: 'Oswald', sans-serif;
color: #3a3a3a;
background-color: #F2F3D7;
}
.container-fluid {
margin: 0 auto;
}
h3 {
text-align: center;
margin-bottom: 1em;
}
.row {
margin-top: 2.5%;
}
.box {
max-width: 400px;
max-height: 300px;
overflow: hidden;
cursor: pointer;
}
.box1 {
background-color: red;
}
.box2 {
background-color: blue;
}
.box3 {
background-color: green;
}
.box4 {
background-color: purple;
}
.box5 {
background-color: yellow;
}
.box6 {
background-color: orange;
}
img {
width: 100%;
max-width: 420px;
height: auto;
opacity: 0.75;
overflow: hidden;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition-timing-function: ease-in;
transition: 1.5s;
}
img:hover {
opacity: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
transform: scale(1.25);
transition-timing-function: ease-in;
transition: 1.5s;
}
