JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<section class="contenedohome1">
<article>
      <figure>
        <div class="contendenedorimagendestacado">
          <a href="">
            <div class="hover">
              <div class="lupa"></div>
            </div>
            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSd3FGvoNmJ5bei3Ufc4U-DjfeopBnzqCCvL6VQXKi37n21XRw-ZA" alt="" />
          </a>
        </div>
        <figcaption>
          <h3>
            ET NULLAM</br>
            LOREM ADIPISCING
          </h3>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo.
          </p>
        </figcaption>
        <a href=""><div class="informacion">informacion</div></a>
      </figure>
    </article>
    <article>
      <figure>
        <div class="contendenedorimagendestacado">
          <a href="">
            <div class="hover">
              <div class="lupa"></div>
            </div>
            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSd3FGvoNmJ5bei3Ufc4U-DjfeopBnzqCCvL6VQXKi37n21XRw-ZA" alt="" />
          </a>
        </div>
        <figcaption>
          <h3>
            ET NULLAM</br>
            LOREM ADIPISCING
          </h3>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo.
          </p>
        </figcaption>
        <a href=""><div class="informacion">informacion</div></a>
      </figure>
    </article>
</section>

CSS

.contenedohome1 article {width: 334px; text-align:center; display: inline-block;vertical-align: top; *display: inline; zoom:1;}
.contendenedorimagendestacado {width: 334px; height: 125px; overflow: hidden; position: relative;}
.contenedohome1 article img{width:334px; height: 125px; }
.contendenedorimagendestacado .hover{width: 334px; height: 125px; position: absolute; background: rgba(255,55,0,0.5);margin: 125px 0 0 0;}

JavaScript

$(function() {           
    $('.contendenedorimagendestacado a').hover(function() {
      $('.hover',$(this)).stop().animate({
        'margin-top':'0'
      },200);
    },
      function () {
        $('.hover',$(this)).stop().animate({
          'margin-top':'-125px'
        },200);
      }
    );
  });

 $(function() {           
    $('.informacion').hover(function() {
      $('.hover,.informacion').stop().animate({
        'margin-top':'0'
      },200);
    },
      function () {
        $('.hover .informacion').stop().animate({
          'margin-top':'-125px'
        },200);
      }
    );
  });