<div class="rosa">
   <div class="cub">
      <div class="rayas">
        <a href=""><img class="chica" src="http://fundicioncabral.com/images/chica.jpg"/>
        </a><h3><a href="">Lipsum</a></h3>
        <span>Expetenda tincidunt in sed</span>
      </div>
   </div>
   <img class="imagen" src="http://fundicioncabral.com/images/uno.jpg"/>
</div>

.rosa{
    position:relative;
    width:280px;
    height:280px;
    display:inline-block;
    color:#fff;
    text-shadow:1px 1px 3px rgba(0,0,0,0.4);
    margin-left:40%;
}
.rosa h3{
    line-height:0%;
}
.rosa:hover > .cub{
    opacity:1;
    transition:all linear 0.3s;
    -webkit-transition:all linear 0.3s;
    -moz-transition:all linear 0.3s;
    backface-visibility:hidden; 
    -moz-backface-visibility:hidden; 
    -webkit-backface-visibility:hidden;
}
.rosa:hover > .rayas{
    opacity:1 !important;
}
.rayas a{
    text-decoration:none;
    color:#fff;
}
.rayas a:hover{
  opacity:0.8;
}
.chica{
    margin:70px 0 0;
    border:2px solid #fff;
    box-shadow:1px 1px 5px rgba(0,0,0,0.4); 
}
.rayas{
    border-right:1px solid #fff;
    border-top:1px solid #fff;
    height:85%;
    width:85%;
    margin:20px auto 0;
}
.cub{
    width:100%;
    height:100%;
    position:absolute;
    bottom:0;
    background:rgba(232,26,162,0.6);
    z-index:1;
    opacity:0;
    transition:all linear 0.3s;
    -webkit-transition:all linear 0.3s;
    -moz-transition:all linear 0.3s;
}