slideIN BG CSS3 with fade in Caption on hover

slideIN BG CSS3 with fade in Caption on hover

by Andrew Pougher

HTML

<div class="box thumbnail">
    <div class="caption">
        <h4 class="">Caption Title</h4>
        
        </div>
    </div>

CSS

.box {
    width: 100%; height: 100px;
    background-size: 200% 100% ;

    background-image: url('http://i.stack.imgur.com/jGlzr.png');
    -webkit-transition: background-position 1.4s;
    -moz-transition: background-position 1.4s;
    transition: background-position 1.4s;
}

.leftin {
    background-position: -100% 0;
}

.caption {
 
	color:#fff !important;
     -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
     opacity: 0;
}
.caption:hover {
   opacity: 1;

}

JavaScript

$(".box").addClass("leftin");