Thumbnail Hover

by Taufik Nurrohman

HTML

<h2 class="post-title">
    Judul Posting
        <img class="post-thumbnail" src="http://lorempixel.com/72/72/animals/" alt="thumbnail">
</h2>

CSS

body {
  padding:50px;
  background-color:#ccc;
}

.post-title {
  position:relative;
  font-weight:bold;
  font-size:50px;
  cursor:pointer;
}

.post-title .post-thumbnail {
  background-color:white;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4); 
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  padding:5px;
  position:absolute;
  top:100%;
  left:10%;
  z-ndex:99;
  margin-top:20px;
  opacity:0;
  visibility:hidden;
  -webkit-transition:all 0.2s ease-out; 
  -moz-transition:all 0.2s ease-out; 
  -ms-transition:all 0.2s ease-out; 
  -o-transition:all 0.2s ease-out; 
  transition:all 0.2s ease-out;
}

.post-title:hover .post-thumbnail {
  visibility:visible;
  margin-top:0;
  opacity:1;
}