Fingerprints can be a good option for displaying effects on website images. In this code, we also have these thumbnails, which have three thumbnails in each row, and these images in the hover mode show a semi-transparent white background with a title written on it. In the third line, however, this is reversed, that is, at the beginning and normally text is written on a background that covers the image. In hover mode, however, this background and text are removed and the image below appears.


HTML
<!-- This script got from www.devanswer.com -->
<div class="grid-wrap">
  <a class="list-block" href="#">
    <figure>
      <img src="http://www.devanswer.com/img/1.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.devanswer.com/img/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://www.devanswer.com/img/1.jpg" alt="" />
      <figcaption>
        <h2>Thumbnail 03</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.devanswer.com/img/2.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://www.devanswer.com/img/2.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.devanswer.com/img/2.jpg" alt="" />
      <figcaption>
        <h2>Thumbnail 06</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.devanswer.com/img/3.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.devanswer.com/img/3.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://www.devanswer.com/img/3.jpg" alt="" />
      <figcaption>
        <h2>Thumbnail 09</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </figcaption>
    </figure>
  </a>
</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=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;
}
@media screen and (max-width: 1200px){
  .list-block h2 {
    font-size: 20px;
    text-align: center;
    padding: 0px 0px 10px 0px;
  }
}
@media screen and (max-width: 992px){
  .list-block {
    width: 48%;
  }
}
@media screen and (max-width: 768px){
  .list-block {
    width: 98%;
  }
}

 Previous

Sliding Thumbnail Image on Mouse Hover

Transitions can make your website photos more beautiful. In this code, we also have a text with a gray background, which in the hover mode, this background . . .

Sliding Thumbnail Image on Mouse Hover
HTML Thumbnail with Hover Effect

HTML Thumbnail with Hover Effect

In this code, the thumbnails have a radius border, and in hover mode the images become smaller and a border is displayed at the top and bottom, in this . . .

  Next