¿Como se llama este "efecto"?

apipe93 · #1 (**permalink**) 06/06/2012, 00:12

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...

Naahuel · #2 (**permalink**) 06/06/2012, 07:32

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

Opción CSS+jQuery

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cajas de texto deslizantes</title>
 
<style type="text/css">
    <!--
    .caja-info-wrap{
        /* Floto las cajas contenedoras
        les doy dimensiones fijas
        oculto el desbordamiento
        les doy posicionamiento relativo*/
        float: left;
        width: 300px;
        height: 300px;
        overflow: hidden;
        position: relative;
    }
    .caja-info-wrap img{
        /* aplicio posicionamiento relativo a las img
        para que sean elementos de bloque y además
        para poder ubicarlas debajo de la caja de 
        texto con z-index */
        position: relative;
        z-index: 10;
    }
    .caja-info-wrap p{
        /* Estilo de la caja deslizante*/
        position: absolute; /* posición absoluta */
        left: 0; /* pegada a la izquierda */
        right: 0; /* pegada a la derecha */
        bottom: 0; /* pegada al fondo */
        padding: 15px; /* espaciado */      
        margin: 0; /* sin margen */
        z-index: 20; /* z index superior a la img para estar encima */
        background: #000000; /* fondo sólido para navegadores que no soportan rgba() */
        background: rgba(0,0,0,0.7); /* fondo semitransparente */
        color:#FFFFFF;
        font-size: 20px;
    }
    .js .caja-info-wrap p{
        /* si el body tiene la clase JS, significa
        que tenemos javascript y podemos ocultar el texto 
        hacia abajo para mostrarlo con javascript */
        bottom: -100%;
    }
    -->
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //indicamos que js está activo
        $('body').addClass('js');
        
        // config
        var s_velocidad = 200;
        var s_easing = 'swing';
        
        //obtenemos las cajas contenedoras
        var $cajas = $('.caja-info-wrap');
        
        //asignamos los eventos
        $cajas
            .mouseenter(function(){
                $elemP = $(this).find('p');
                // al entrar el mouse, animar a bottom:0
                $elemP.animate({
                    bottom : 0
                },s_velocidad,s_easing);
            })
            .mouseleave(function(){
                $elemP = $(this).find('p');
                // al sacar el mouse, animar a bottom:-100%
                $elemP.animate({
                    bottom : -1*($elemP.outerHeight())
                },s_velocidad,s_easing);
            });
    });
</script>
 
</head>
<body>
    <div class="caja-info-wrap">
        <img src="http://placekitten.com/300/300" alt="Gatito" />
        <p>Lorem ipsum dolor sit amet, ephesiorum quod</p>
    </div>
    <div class="caja-info-wrap">
        <img src="http://placebear.com/300/300" alt="Osito" />
        <p>Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in.</p>
    </div>
</body>
</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<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cajas de texto deslizantes</title>
 
<style type="text/css">
    <!--
    .caja-info-wrap{
        /* Floto las cajas contenedoras
        les doy dimensiones fijas
        oculto el desbordamiento
        les doy posicionamiento relativo*/
        float: left;
        width: 300px;
        height: 300px;
        overflow: hidden;
        position: relative;
    }
    .caja-info-wrap img{
        /* aplicio posicionamiento relativo a las img
        para que sean elementos de bloque y además
        para poder ubicarlas debajo de la caja de 
        texto con z-index */
        position: relative;
        z-index: 10;
    }
    .caja-info-wrap p{
        /* Estilo de la caja deslizante*/
        position: absolute; /* posición absoluta */
        left: 0; /* pegada a la izquierda */
        right: 0; /* pegada a la derecha */
        bottom: -100%; /* debajo del fondo */
        padding: 15px; /* espaciado */      
        margin: 0; /* sin margen */
        z-index: 20; /* z index superior a la img para estar encima */
        background: #000000; /* fondo sólido para navegadores que no soportan rgba() */
        background: rgba(0,0,0,0.7); /* fondo semitransparente */
        color:#FFFFFF;
        font-size: 20px;
        
        /* transiciones para animar */
        -webkit-transition: bottom 0.3s linear;
        -moz-transition: bottom 0.3s linear;
        -o-transition: bottom 0.3s linear;
        transition: bottom 0.3s linear;
    }
    .caja-info-wrap:hover p{
        /* al hacer hover sobre la caja
        elevamos el texto */
        bottom: 0;
    }
    -->
</style>
 
</head>
<body>
    <div class="caja-info-wrap">
        <img src="http://placekitten.com/300/300" alt="Gatito" />
        <p>Lorem ipsum dolor sit amet, ephesiorum quod</p>
    </div>
    <div class="caja-info-wrap">
        <img src="http://placebear.com/300/300" alt="Osito" />
        <p>Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in.</p>
    </div>
</body>
</html>