Aprende cómo poner las imágenes o fotos de
tu blog que hagan una rotación y se amplíen al pasar el ratón sobre ellos. Este
efecto en CSS para imágenes funciona por separado, es decir, puedes elegir si
las imágenes giren o sólo aumenten de tamaño cuando pasa el cursor.
tu blog que hagan una rotación y se amplíen al pasar el ratón sobre ellos. Este
efecto en CSS para imágenes funciona por separado, es decir, puedes elegir si
las imágenes giren o sólo aumenten de tamaño cuando pasa el cursor.
Código CSS para girar o ampliar las
imágenes
imágenes
Para girar y hacer zoom en las imágenes de
tu blog debes colocar este código CSS en el HTML del Blog:
tu blog debes colocar este código CSS en el HTML del Blog:
.post img {padding:20px}
.post img:hover{-webkit-transition: all 1s
ease;-moz-transition: all 1s ease;transition: all 1s ease;-moz-transform:
scale(1.2) rotate(-720deg) ;-webkit-transform: scale(1.2) rotate(-720deg)
;-o-transform: scale(1.2) rotate(-720deg) ;-ms-transform: scale(1.2)
rotate(-720deg) ;transform: scale(1.2) rotate(-720deg);}
ease;-moz-transition: all 1s ease;transition: all 1s ease;-moz-transform:
scale(1.2) rotate(-720deg) ;-webkit-transform: scale(1.2) rotate(-720deg)
;-o-transform: scale(1.2) rotate(-720deg) ;-ms-transform: scale(1.2)
rotate(-720deg) ;transform: scale(1.2) rotate(-720deg);}
Si quieres hacer que funcione en todas las fotos
del blog saca el extracto. post. Es posible aplicar el efecto a un gadget como
el de popular Posts en el Blog.
del blog saca el extracto. post. Es posible aplicar el efecto a un gadget como
el de popular Posts en el Blog.
Cómo hacer el efecto de rotar y ampliar las
imágenes
imágenes
Estos efectos en imágenes con CSS tienen
varias posibilidades de personalización para cada fragmento de código, podrás
encontrar varias veces el mismo código después cambiar todo con el mismo valor:
varias posibilidades de personalización para cada fragmento de código, podrás
encontrar varias veces el mismo código después cambiar todo con el mismo valor:
La velocidad del efecto, entonces la puedes
cambiar con el número que quieras incluyendo el uso de números decimales por
ejemplo: 0,7 s.
cambiar con el número que quieras incluyendo el uso de números decimales por
ejemplo: 0,7 s.
-720deg: la rotación de la imagen. El signo
menos al principio muestra la dirección de la rotación, es decir, si quieres
que gire hacia el otro lado de la marca. El número 720 son los grados de
rotación que se puede modificar como lo desea, pero recuerda que 360 es una vuelta
completa, es decir si usas 180 girará y deja la imagen invertida.
menos al principio muestra la dirección de la rotación, es decir, si quieres
que gire hacia el otro lado de la marca. El número 720 son los grados de
rotación que se puede modificar como lo desea, pero recuerda que 360 es una vuelta
completa, es decir si usas 180 girará y deja la imagen invertida.
La escala (1.2): cambia el tamaño de las imágenes.
Recuerda que esto es en IE y si pones 2 la imagen será dos veces el tamaño
original.
Recuerda que esto es en IE y si pones 2 la imagen será dos veces el tamaño
original.
. post img {padding: 20px}: esta parte es
esencial y que debe hacer varias pruebas para ajustar el valor 20 que es el
margen alrededor de la imagen.
esencial y que debe hacer varias pruebas para ajustar el valor 20 que es el
margen alrededor de la imagen.
La imagen gire y aumentan de tamaño, tal vez
estaría por encima o por debajo de tu texto, blog menú o cualquier otra cosa.
Así como el efecto que con cambiar el número 20 para darle suficiente espacio
alrededor de la imagen.
estaría por encima o por debajo de tu texto, blog menú o cualquier otra cosa.
Así como el efecto que con cambiar el número 20 para darle suficiente espacio
alrededor de la imagen.
Hay otros efectos con CSS para utilizar en tu
blog y atraer más atención de los visitantes:
blog y atraer más atención de los visitantes:
- Hacer efectos en fotos de blog y fotos con
CSS - Efectos sobre enlaces usando Gifs animados
como imágenes de fondo - Menú horizontal con efectos en Blogger
usando CSS
Esperamos que disfrutes de este consejo
acerca de los efectos en las imágenes usando CSS y puedas crear efectos en las
fotos de tu blog. Abrazos y éxito!
acerca de los efectos en las imágenes usando CSS y puedas crear efectos en las
fotos de tu blog. Abrazos y éxito!
