Foros del Web » Creando para Internet » CSS »

¿Como se llama este "efecto"?

Estas en el tema de ¿Como se llama este "efecto"? en el foro de CSS en Foros del Web. Hola amigos, me gusta mucho la manera en que se muestra informacion de una imagen como se muestra en esta web [URL="http://www.shinybinary.com"]http://www.shinybinary.com[/URL], pero no se ...
  #1 (permalink)  
Antiguo 06/06/2012, 00:12
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 11 años, 4 meses
Puntos: 0
¿Como se llama este "efecto"?

Hola amigos, me gusta mucho la manera en que se muestra informacion de una imagen como se muestra en esta web [URL="http://www.shinybinary.com"]http://www.shinybinary.com[/URL], pero no se como buscar para aprender como se hace, si alguno sabe espero me ayude con la info, desde ya muchas gracias...
  #2 (permalink)  
Antiguo 06/06/2012, 07:32
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 12 años, 6 meses
Puntos: 192
Respuesta: ¿Como se llama este "efecto"?

Estaba aburrido y me tomé el trabajo de hacerte un ejemplo:

Opción CSS+jQuery
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <title>Cajas de texto deslizantes</title>
  4.  
  5. <style type="text/css">
  6.     <!--
  7.     .caja-info-wrap{
  8.         /* Floto las cajas contenedoras
  9.         les doy dimensiones fijas
  10.         oculto el desbordamiento
  11.         les doy posicionamiento relativo*/
  12.         float: left;
  13.         width: 300px;
  14.         height: 300px;
  15.         overflow: hidden;
  16.         position: relative;
  17.     }
  18.     .caja-info-wrap img{
  19.         /* aplicio posicionamiento relativo a las img
  20.         para que sean elementos de bloque y además
  21.         para poder ubicarlas debajo de la caja de
  22.         texto con z-index */
  23.         position: relative;
  24.         z-index: 10;
  25.     }
  26.     .caja-info-wrap p{
  27.         /* Estilo de la caja deslizante*/
  28.         position: absolute; /* posición absoluta */
  29.         left: 0; /* pegada a la izquierda */
  30.         right: 0; /* pegada a la derecha */
  31.         bottom: 0; /* pegada al fondo */
  32.         padding: 15px; /* espaciado */     
  33.         margin: 0; /* sin margen */
  34.         z-index: 20; /* z index superior a la img para estar encima */
  35.         background: #000000; /* fondo sólido para navegadores que no soportan rgba() */
  36.         background: rgba(0,0,0,0.7); /* fondo semitransparente */
  37.         color:#FFFFFF;
  38.         font-size: 20px;
  39.     }
  40.     .js .caja-info-wrap p{
  41.         /* si el body tiene la clase JS, significa
  42.         que tenemos javascript y podemos ocultar el texto
  43.         hacia abajo para mostrarlo con javascript */
  44.         bottom: -100%;
  45.     }
  46.     -->
  47.  
  48. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  49. <script type="text/javascript">
  50.     $(function(){
  51.         //indicamos que js está activo
  52.         $('body').addClass('js');
  53.        
  54.         // config
  55.         var s_velocidad = 200;
  56.         var s_easing = 'swing';
  57.        
  58.         //obtenemos las cajas contenedoras
  59.         var $cajas = $('.caja-info-wrap');
  60.        
  61.         //asignamos los eventos
  62.         $cajas
  63.             .mouseenter(function(){
  64.                 $elemP = $(this).find('p');
  65.                 // al entrar el mouse, animar a bottom:0
  66.                 $elemP.animate({
  67.                     bottom : 0
  68.                 },s_velocidad,s_easing);
  69.             })
  70.             .mouseleave(function(){
  71.                 $elemP = $(this).find('p');
  72.                 // al sacar el mouse, animar a bottom:-100%
  73.                 $elemP.animate({
  74.                     bottom : -1*($elemP.outerHeight())
  75.                 },s_velocidad,s_easing);
  76.             });
  77.     });
  78.  
  79. </head>
  80.     <div class="caja-info-wrap">
  81.         <img src="http://placekitten.com/300/300" alt="Gatito" />
  82.         <p>Lorem ipsum dolor sit amet, ephesiorum quod</p>
  83.     </div>
  84.     <div class="caja-info-wrap">
  85.         <img src="http://placebear.com/300/300" alt="Osito" />
  86.         <p>Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in.</p>
  87.     </div>
  88. </body>
  89. </html>

Está todo comentado para que entiendas qué hace cada cosa, creo que está bastante claro.

Dado que estamos en el foro de CSS:
Opción CSS pura (se cambió un poquitito el CSS y se quitó todo el JS):
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <title>Cajas de texto deslizantes</title>
  4.  
  5. <style type="text/css">
  6.     <!--
  7.     .caja-info-wrap{
  8.         /* Floto las cajas contenedoras
  9.         les doy dimensiones fijas
  10.         oculto el desbordamiento
  11.         les doy posicionamiento relativo*/
  12.         float: left;
  13.         width: 300px;
  14.         height: 300px;
  15.         overflow: hidden;
  16.         position: relative;
  17.     }
  18.     .caja-info-wrap img{
  19.         /* aplicio posicionamiento relativo a las img
  20.         para que sean elementos de bloque y además
  21.         para poder ubicarlas debajo de la caja de
  22.         texto con z-index */
  23.         position: relative;
  24.         z-index: 10;
  25.     }
  26.     .caja-info-wrap p{
  27.         /* Estilo de la caja deslizante*/
  28.         position: absolute; /* posición absoluta */
  29.         left: 0; /* pegada a la izquierda */
  30.         right: 0; /* pegada a la derecha */
  31.         bottom: -100%; /* debajo del fondo */
  32.         padding: 15px; /* espaciado */     
  33.         margin: 0; /* sin margen */
  34.         z-index: 20; /* z index superior a la img para estar encima */
  35.         background: #000000; /* fondo sólido para navegadores que no soportan rgba() */
  36.         background: rgba(0,0,0,0.7); /* fondo semitransparente */
  37.         color:#FFFFFF;
  38.         font-size: 20px;
  39.        
  40.         /* transiciones para animar */
  41.         -webkit-transition: bottom 0.3s linear;
  42.         -moz-transition: bottom 0.3s linear;
  43.         -o-transition: bottom 0.3s linear;
  44.         transition: bottom 0.3s linear;
  45.     }
  46.     .caja-info-wrap:hover p{
  47.         /* al hacer hover sobre la caja
  48.         elevamos el texto */
  49.         bottom: 0;
  50.     }
  51.     -->
  52.  
  53. </head>
  54.     <div class="caja-info-wrap">
  55.         <img src="http://placekitten.com/300/300" alt="Gatito" />
  56.         <p>Lorem ipsum dolor sit amet, ephesiorum quod</p>
  57.     </div>
  58.     <div class="caja-info-wrap">
  59.         <img src="http://placebear.com/300/300" alt="Osito" />
  60.         <p>Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in.</p>
  61.     </div>
  62. </body>
  63. </html>
__________________
nahueljose.com.ar

Etiquetas: efectos, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:36.