Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[PUBLICO] Imágenes con descripción animada CSS3
#1
Bombilla 
[Imagen: 141126054732499212.png]
Hola amigos aki les dejo este nuevo Imágenes con descripción animada CSS3 publicare varios codigos/scripts tendran 3 Etiquetas Diferentes...
1.- [PUBLICO] El código fue usado/editado desde otra Pagina para traérselos.
2.- [PROPIO] Esto quiere decir que es mi Código Propio osea que yo cree el código de 0% - 100% pero podran usarlo con Respectivos Créditos.
3.- [PUBLICO/PROPIO] Esto quiere decir que el Código es Tanto como Código Mio como de otros users mas para que luego no digan que eso lo cree yo.


[Imagen: Imagenes.png]
[Imagen: screen.png]

[Imagen: screen.png]

HTML:
Código:
<div id="divContenedor">
            <div id="divInfo">
                <h1>Im&aacute;genes con descripci&oacute;n animada usando transformaciones de CSS3</h1>
                <p>Ejemplo por Cali Rojas</p>
                <p>&nbsp;</p>
                <p>-Coloque el puntero del rat&oacute;n por unos segundos sobre la imagen y luego ret&iacute;relo-</p>
            </div>
            <div class="clsImagen">
                <img src="http://www.lewebmonster.com/ejemplos/imagenes-con-descripcion-animada-css3/img/el-yiguirro.jpg" alt="El Yig&uuml;irro">
                <div class="clsDescripcion">
                    <h2>El Yig&uuml;irro</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                        officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>
            <div class="clsImagen">
                <img src="http://www.lewebmonster.com/ejemplos/imagenes-con-descripcion-animada-css3/img/guaria-morada.jpg" alt="La Guaria Morada">
                <div class="clsDescripcion">
                    <h2>La Guaria Morada</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                        officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>
            <div class="clsImagen">
                <img src="http://www.lewebmonster.com/ejemplos/imagenes-con-descripcion-animada-css3/img/la-carreta.jpg" alt="La Carreta">
                <div class="clsDescripcion">
                    <h2>La Carreta</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                        officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>
        </div>

CSS:
Código:
*{
    padding: 0;
    margin: 0;
}
body{
    font: normal 12px Tahoma, Verdana, Arial, sans-serif;
    background: #333;
    color: #fff;
}
h1{
    font-size: 18px;    
}
a{
    color: #f00;
}

#divContenedor{
    margin: 0 auto;
    width: 830px;
    margin-top: 50px;
}
    #divInfo{
        text-align: center;
        padding-bottom: 40px;
    }
.clsImagen{
    background: #000;
    border: solid 1px #222;
    box-shadow: 0px 0px 10px #222;
    border-radius: 5px;
    width: 250px;
    height: 400px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: 10px;
}
    .clsImagen img{
        border-radius: 5px;
    }
    .clsImagen .clsDescripcion{
        background: #000;
        position: absolute;
        width: 250px;
        height: 400px;
        /* colocamos la capa abajo del contenedor (para que no se vea) */
        top: 250px;
        /* inicialmente la descripcion va a estar rotada 90 grados*/
        -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                    transform: rotate(90deg);
        /* definimos las transiciones */
        -webkit-transition: all 1s ease-in;
            -moz-transition: all 1s ease-in;
                -o-transition: all 1s ease-in;
                    transition: all 1s ease-in;
        /* la opacidad inicial sera cero */
        opacity: 0;
        border-radius: 5px;
    }
        .clsImagen .clsDescripcion *{
            padding: 10px;
        }
    .clsImagen:hover .clsDescripcion{
        /* rotamos la descripcion a cero grados */
        -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                    transform: rotate(0deg);
        /* colocamos su opacidad en 70% */
        opacity: .7;
        /* subimos la capa completamente */
        top: 0;
    }

JS:
NO AHI

DEMO:
http://codepen.io/AngelKrak/pen/xbVKOr

[Imagen: 10-2.jpg]
Firma editada por moderación: Los enlaces con ID de referido no estan permitidos.
WWW
#2
Se ve bien el efecto es simple pero vistoso y le da buena imagen a una web, sirve muy bien para los que están iniciando con html5 y paginas con diseño simple y estético, gracias por el aporte, saludos.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  jQuery: ocultar imágenes rotas Jvh_22 10 819 03-01-2017, 09:26 PM
Último mensaje: gassip
  Como subir Archivos, Imagenes PHP MysQL gassip 0 1,560 24-10-2016, 06:59 AM
Último mensaje: gassip
  Cargar web (con imagenes) mas rapido CarlosAlberto 18 1,509 08-03-2016, 01:34 AM
Último mensaje: LaaprendizdeCM
  Subir imagenes con PHP y class.upload.php cmascreativo 0 402 18-02-2016, 05:54 PM
Último mensaje: cmascreativo
  Codigo Imágenes que cambian automáticamente tucine 8 892 19-05-2015, 03:36 PM
Último mensaje: betiko2424
  [PUBLICO] Tutorial Botones con perspectiva 3D AngelKrak 0 360 17-01-2015, 05:44 AM
Último mensaje: AngelKrak
Bombilla [PUBLICO] Spoiler Chromium AngelKrak 0 299 17-01-2015, 05:33 AM
Último mensaje: AngelKrak
  script bueno para secuencia imagenes canpios 7 889 19-12-2014, 06:01 AM
Último mensaje: amplox
  Como hacer un menu horizontal con html5 y css3 torgar22 4 1,002 16-12-2014, 02:07 PM
Último mensaje: Demozz
  7 Efectos con CSS3 jlgarduza 0 381 23-11-2014, 06:03 AM
Último mensaje: jlgarduza



Usuarios navegando en este tema: 1 invitado(s)