domingo, 21 de abril de 2013

Añade a tu sitio este efecto Hover a tus imágenes efecto de transición brillo con CSS3 (Blogger)

Damian 4/21/2013

Gracias al CSS3(I LOVE CSS3) podemos realizar varios efectos a nuestro sitiodejándoloespectacular todo de pende de su creatividad y manejo del css3 ,hoy les presento un efecto ideal para susimágenesde cualquier tipo en este caso muestro un ejemplo para anuncios puede ver un ejemplo .

Ejemplo :

Instalación en Blogger:

Paso 1) Añadir el CSS3

Como Google actualizo el editor de blogger(para mi es un asco de editor falta mucho por mejorar),nos dirigimos aPlantilla-luego clic enEditar HTML-- y hacemos un click dentro del editor luego realice lacombinaciónde teclasCTRL+F esto es para activar el buscador dentro del editor y no llamar el buscador del navegador,luego busque la etiqueta de cierre/b:skin y justo arriba de esta etiqueta pegue el siguientecódigoCSS3.

.contenedor {
    width: 278px;
 margin: 20px;
    color: #000406;
    font: italic 18px Georgia;
    text-align: center;
}
.conte_imagen{
    width:  278px;
    height: 231px;
    margin: 30px auto;
    position: relative;
    border:4px solid #999;
}
.activa_hover{
    width:100%; 
 height: 100%; 
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQTcx9pzcMv_eiTOTNO2fq-87ePK4Ui4eFOmK3-TC2eweiZjbE3G0hJTZti5uY6VLf2Xs4vNxZ9dRyWl2xdNMoO8egzJ9w8Kn8HL-56P1kbhn5ehbdsjiqqJlsqZA-XiW5vyN2UiSzUA/s500/brillo.png);
    position: absolute;
    /*posicion de la imagen*/
    background-position: -265px 0; 
    left:0px; top:0px; 
    background-repeat:no-repeat;
    /*comenzamos transicion*/
    -webkit-transition: background-position .3s ease;
       -moz-transition: background-position .3s ease;
         -o-transition: background-position .3s ease;
            transition: background-position .3s ease;
}
.activa_hover:hover{
    /*posicion hover de la imagen*/
    background-position: 160px 0;
}

Paso 2) Añadir el HTML
una vez que hemos añadido elcódigocss3, nos dirigimos aDiseño--clic enAñadir un Gadget--y escoja la opcionHTML/JavaScript y pegue el siguiente codigo.

div class="contenedor"
Efecto Brillo con CSS3
div class="conte_imagen"
 img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDQ1RaZudg1bmJRRyXr0ZlaltjDfALWiT7a2_Ib_D4jhMS71z3Y-vRUgPZ-_S1dNvAqygpul0huaIQxj2v-eEcmyVIwfXZbu5fbI4iM-VTKYOAq6lFz04POlwD1BjOvWBA-FGpHIJHWQ/s278/anuncio.jpg" /
 div class="activa_hover"/div
/div
div