Awesome Grid Hover Effects with jQuery and CSS3

Makes uses of jQuery and CSS3 transitions & keyframes to create a image grid with awesome caption hover effects like slide, twist, fade and much more.

How to use it:

1. Include the jQuery library and other required resources in your document.

<link href="//fonts.googleapis.com/css?family=Roboto:400,100,300,900" rel="stylesheet">
<link  href="reset.css" rel="stylesheet">
<script src="prefixfree.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. The markup Html structure to create a grid of images with different caption hover effects.

<div class="container one">
  <img alt="" src="1.jpg">
  <div>
    <span>
      <h2>SLIDE Effect</h2>
      Image caption 1
    </span>
  </div>
</div>

<div class="container two">
  <img alt="" src="2.jpg">
  <div>
    <span>
      <h2>SLIDE Effect 2</h2>
      Image caption 1
    </span>
  </div>
</div>

<div class="container three">
  <img alt="" src="3.jpg">
  <div>
    <span>
      <h2>FADE Effect</h2>
      Image caption 3
    </span>
  </div>
</div>

<div class="container four">
  <img alt="" src="4.jpg">
  <div>
    <span>
      <h2>TWIST Effect</h2>
      Image caption 4
    </span>
  </div>
</div>

3. The required CSS/CSS3 to style the image grid. You can tweak the caption effects or create your own effects by editing the following styles.

<style>
body {
  text-align: center;
  font-family: "Roboto", sans-serif;
}

.container {
  vertical-align: top;
  display: inline-block;
  position: relative;
  background: #efefef;
  background-size: cover;
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin-right: -0.25em;
}

.container.one div.over {
  -webkit-animation: slideLeft 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.container.one div.out {
  -webkit-animation: slideLeftOut 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.container.two div.over {
  -webkit-animation: slideUp 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.container.two div.out {
  -webkit-animation: slideUpOut 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.container.three div {
  left: 0;
  opacity: 0;
}

.container.three:hover div { opacity: 1; }

.container.four div {
  left: 0;
  opacity: 0;
  -webkit-transform: rotate(180deg) scale(0.2);
}

.container.four:hover div {
  opacity: 1;
  -webkit-transform: rotate(0deg);
}

.container.five div {
  left: 0;
  opacity: 0;
  -webkit-transform: scale(0.9);
}

.container.five:hover div {
  opacity: 1;
  -webkit-transform: scale(1);
}

.container img { width: 100%; }

.container div {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  font-weight: 300;
  color: #efefef;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(231, 76, 60, 0.7);
  top: 0;
  left: 100%;
  transition: all 300ms ease-in-out;
  background: #a90329;
  background: linear-gradient(135deg, rgba(169, 3, 41, 0.8) 0%, rgba(143, 2, 34, 0.8) 44%, rgba(109, 0, 25, 0.8) 100%);
}

.container div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.container div span {
  display: inline-block;
  vertical-align: middle;
  padding: 30px;
  letter-spacing: 1px;
}

.container div span h2 {
  font-weight: 900;
  font-size: 4em;
  letter-spacing: 1px;
  line-height: 0.85em;
}

 @-webkit-keyframes 
slideLeft {  0% {
 left: 100%;
}
 70% {
 left: 0%;
}
 85% {
 left: 4%;
}
 100% {
 left: 0%;
}
}
@-webkit-keyframes 
slideLeftOut {  0% {
 left: 0%;
}
 70% {
 left: 100%;
}
 85% {
 left: 96%;
}
 100% {
 left: 100%;
}
}
@-webkit-keyframes 
slideUp {  0% {
 top: 100%;
 left: 0%;
}
 70% {
 top: 0%;
}
 85% {
 top: 4%;
}
 100% {
 top: 0%;
 left: 0%;
}
}
@-webkit-keyframes 
slideUpOut {  0% {
 top: 0%;
 left: 0%;
}
 70% {
 top: 100%;
}
 85% {
 top: 96%;
}
 100% {
 top: 100%;
 left: 0%;
}
}
</style>

4. A little jQuery script to enable the caption hover effects.

$('.container').hover(
  function(){
    $(this).children("div").removeClass('out').addClass('over');
  },
  function(){
    $(this).children("div").removeClass('over').addClass('out');
  }
);

---

This awesome jQuery plugin is developed by caseymorrisus. For more Advanced Usages, please check the demo page or visit the official website.