logo DevAnswer - Developers Answer

Multiple Effects for HTML Thumbnails

28th September

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@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%;
  }
}
</style>

</head>
<body>
<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>

</body>
</html>



Other Codes

Sliding Thumbnail Image on Mouse Hover


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 . . .
HTML Thumbnails with with Hovering Text . . .


HTML Thumbnails with with Hovering Text . . .

In this code, we have a number of small images that are displayed in slide mode in different parts of the text. This text has a blue background that covers . . .
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 . . .
CSS Thumbnail with Text Zoom Effect on Hover


CSS Thumbnail with Text Zoom Effect on Hover

In this code, the thumbnail shows the title and buttons in the hover time. In addition, the image is displayed in the original color during the hover.