Image Hover CSS

Image Hover / Imagen efecto al pasar el cursor con HTML y CSS  By LittleSnippets.net


<figure class="snip1361">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample45.jpg" alt="sample45" />
<figcaption>
<h3>Bartholemew Shoe</h3>
<p>Weekends don't count unless you spend them doing something completely pointless.</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1361 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample77.jpg" alt="sample77" />
<figcaption>
<h3>Spruce Springclean</h3>
<p>I'm killing time while I wait for life to shower me with meaning and happiness. -</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1361"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample99.jpg" alt="sample99" />
<figcaption>
<h3>Desmond Eagle</h3>
<p>The only skills I have the patience to learn are those that have no real application in life. </p>
</figcaption>
<a href="#"></a>
</figure>
CSS

@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Quattrocento);
.snip1361{font-family:Quattrocento,Arial,sans-serif;position:relative;overflow:hidden;margin:10px;min-width:230px;max-width:315px;width:100%;color:#141414;text-align:left;line-height:1.4em;font-size:16px}
.snip1361 *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .35s ease;transition:all .35s ease}
.snip1361 img{max-width:100%;vertical-align:top}
.snip1361 figcaption{position:absolute;top:calc(77%);width:100%;background-color:#fff;padding:15px 25px 65px}
.snip1361 figcaption:before{position:absolute;content:'';z-index:2;bottom:100%;left:0;width:100%;height:80px;background-image:-webkit-linear-gradient(top,transparent 0,#fff 100%);background-image:linear-gradient(to bottom,transparent 0,#fff 100%)}
.snip1361 h3,.snip1361 p{margin:0 0 10px}
.snip1361 h3{font-weight:300;font-size:1.4em;line-height:1.2em;font-family:Oswald,Arial,sans-serif;text-transform:uppercase}
.snip1361 p{font-size:.9em;letter-spacing:1px;opacity:.9}
.snip1361 a{position:absolute;top:0;bottom:0;left:0;right:0;z-index:2}
.snip1361.hover figcaption,.snip1361:hover figcaption{top:80px}

JS

$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

Split Image on hover
Magnifying Effect on Image
CSS Gradient Hover Effect.