Here I am starting a series of posts showcasing some beautiful CSS hover effects on thumbnails some of which I have also used in my themes. Let’s start with the first one. I used this one in Klean theme.

Hope you get to learn something and create something awesome from this.

Rotating Bar Hover Effect

This effect was used by me in one of my WordPress themes. It turned out to be a really awesome effect. So decided to share it on my blog.

HTML:

<div id="container">
     <img src="whatever.jpg" alt="" />
</div>
<div class="bar"></div>
<h1 class="caption">I am a caption!</h1>

CSS:

#image-wrapper {
  position: relative;
}
#image-wrapper .thumbnail {
  position: relative;
  opacity: 1;
  transition: opacity ease-in-out 0.5s;
}
#image-wrapper .thumbnail img {
  max-width: 100%;
  height: auto;
  position: relative;
}
#image-wrapper .caption {
  position: absolute;
  font-weight: 200;
  overflow: hidden;
  color: white;
  top: 25%;
  left: 0px;
  right: 0px;
  z-index: 444;
  width: 60%;
  margin: auto;
  opacity: 0;
  margin-right: -10px;
  padding-right: 20px;
  transition: opacity 0.3s ease-in-out 0.5s, margin-right 0.3s ease-in-out 0.5s;
}
#image-wrapper .bar {
  content: "";
  position: absolute;
  width: 70%;
  left: 0px;
  right: 0px;
  margin: auto;
  height: 2px;
  background: white;
  z-index: 5;
  bottom: 10%;
  transition: all .5s;
}
#image-wrapper:hover .thumbnail-1 {
  opacity: .8;
}
#image-wrapper:hover .caption {
  margin-right: 0;
  opacity: 1;
}
#image-wrapper:hover .bar {
  content: "";
  position: absolute;
  width: 70%;
  left: 55%;
  right: 0px;
  margin: auto;
  height: 2px;
  background: white;
  z-index: 5;
  bottom: 50%;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

A lot of variations are possible with this effect with just slight changes in the code.

Any suggestions and improvements are most welcome. Just head over to comments and share your opinions.

Check out the next article in the series-
http://www.divjot.co/beautiful-css-hover-effects-2/