Animación de subtitulos

• 
  Modelo 1

  Nota: Lorem Ipsum

  
  
  
  
  
  
  
  
  
  
  

  Este efecto fue extraído de la siguiente URL: http://hasinhayder.github.io

  
  
  Fuente: http://hasinhayder.github.io/ImageCaptionHoverAnimation/index2.html <style> .caption-style-2{ list-style-type: none; margin: 0px; padding: 0px; } .caption-style-2 li:hover .caption{ opacity: 1; transform: translateY(-100px); -webkit-transform:translateY(-100px); -moz-transform:translateY(-100px); -ms-transform:translateY(-100px); -o-transform:translateY(-100px); } .caption-style-2 img{ margin: 0px; padding: 0px; float: left; z-index: 4; } .caption-style-2 .caption{ cursor: pointer; position: absolute; opacity: 0; top:300px; -webkit-transition:all 0.15s ease-in-out; -moz-transition:all 0.15s ease-in-out; -o-transition:all 0.15s ease-in-out; -ms-transition:all 0.15s ease-in-out; transition:all 0.15s ease-in-out; } .caption-style-2 .blur{ background-color: rgba(0,0,0,0.7); height: 100px; width: 400px; z-index: 5; position: absolute; } .caption-style-2 .caption-text h1{ text-transform: uppercase; font-size: 18px; } .caption-style-2 .caption-text{ z-index: 10; color: #fff; position: absolute; width: 400px; height: 300px; text-align: center; top:20px; } </style> <ul class="caption-style-2"> <li> <img src="http://hasinhayder.github.io/ImageCaptionHoverAnimation/img/everycowboy_dribbbleready_shot.jpg" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>Modelo 1</h1> <p>Nota: Lorem Ipsum</p> </div> </div>