JSFiddle - React, Tailwind, and code Playground

HTML

<section class="contenedohome1">
<article>
      <figure>
        <div class="contendenedorimagendestacado" id="imagen1">
          <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="#" data-prueba="imagen1"><div class="informacion">informaciondd</div></a>
      </figure>
    </article>
    <article>
      <figure>
        <div class="contendenedorimagendestacado" id="imagen2">
          <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="#" data-prueba="imagen2"><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;}
.hover{
    margin-top: 125px;
}

JavaScript

$(function() {           
    $('.contendenedorimagendestacado a').hover(function() {
      $('.hover',$(this)).stop().animate({
        'margin-top':'0'
      },200);
    },
      function () {
        $('.hover',$(this)).stop().animate({
          'margin-top':'-125px'
        },200);
      }
    );
     
    $(".informacion").hover(
		function(){
			var idImagen = $(this).parent().data("prueba");
			var imagen = $("#" + idImagen);
            console.log(imagen.children("a").children("div"));
			imagen.children("a").children("div").stop().animate({
				'margin-top':'0'
			},200);
        
		},
		function(){
			var idImagen = $(this).parent().data("prueba");
			var imagen = $("#" + idImagen);
            console.log(imagen.children("a").children("div"));
			imagen.children("a").children("div").stop().animate({
				'margin-top':'-125px'
			},200);
		}
		); 
     
  });