Hola gente de T! bueno hace mucho que no hago un post pero bueno ya muchos saben esto cada ves apesta mas.
Bueno me encontraba trabajando en mi web y quería que mis imágenes se ampliaran y bueno encontré este gran efecto animado de CSS 3 que me la amplia y anima, quiero compartirlo:
Para que aplicar el efecto css solo usan la etiqueta div con un id adentro que sera ampliar
Si fueran varia imágenes pues así:
Bueno y para complementar le colocan un efecto que yo le hice a mi web en la imágenes que es un margen, borde un box shadow.... de color rojo, pero igual ustedes pueden modificar el color.
Para cambiar el color solo remplazan #DF0101, #FF0000 por el color que quieran.
Y el borde si lo quieren del mismo colo o otro cambian #FF0000 en "border: 1px solid #FF0000"
Si no saben el código HTML del color acá un generador: http://html-color-codes.info/
Bueno aca le dejo como quedo en mi web:
Al pasar el mouse
Saludos espero les guste.
@xBalban
Bueno me encontraba trabajando en mi web y quería que mis imágenes se ampliaran y bueno encontré este gran efecto animado de CSS 3 que me la amplia y anima, quiero compartirlo:
/* la imagen en su forma normal */
#ampliar img{
-webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.5;
}
/* al pasar el cursor por encima SE AMPLIA*/
#ampliar img:hover{
-webkit-transform:scale(2); /*Webkit:Modificamos tamaño a escala*/
-moz-transform:scale(2); /*Mozilla:Modificamos tamaño a escala*/
-o-transform:scale(2); /*Opera:Modificamos tamaño a escala*/
-webkit-transition-duration: 0.5s; /*Webkit:Duración de la animación*/
-moz-transition-duration: 0.5s; /*Mozilla:Duración de la animació*/
-o-transition-duration: 0.5s; /*Opera:Duración de la animació*/
opacity: 1;
}
Para que aplicar el efecto css solo usan la etiqueta div con un id adentro que sera ampliar
<div id="ampliar"> <img src="imagen.jpg"> </div>
Si fueran varia imágenes pues así:
<div id="ampliar">
<img src="imagen.jpg">
<img src="imagen01.jpg">
<img src="imagen01.jpg">
</div>
Bueno y para complementar le colocan un efecto que yo le hice a mi web en la imágenes que es un margen, borde un box shadow.... de color rojo, pero igual ustedes pueden modificar el color.
img {
-moz-box-shadow: 0px 0px 30px #DF0101;
-webkit-box-shadow: 0px 0px 30px #FF0000;
box-shadow: 0px 0px 30px #DF0101;
padding: 10px;
border: 1px solid #FF0000;
margin: 20px;
}
Para cambiar el color solo remplazan #DF0101, #FF0000 por el color que quieran.
Y el borde si lo quieren del mismo colo o otro cambian #FF0000 en "border: 1px solid #FF0000"
Si no saben el código HTML del color acá un generador: http://html-color-codes.info/
Bueno aca le dejo como quedo en mi web:
Al pasar el mouse
Saludos espero les guste.
@xBalban