Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Zoom en una imagen al pasar el cursor
#1
Puedes pasar el cursor en afiliados VIP de esta web
http://www.modsmexicanosfull.com/
notaras un efecto de zoom
este efecto es por que la mayoria de las webs tiene afiliados y si tu quieres tener exito debes ser mejor que los demas, ir un paso delante
Bueno el efecto es sensillo
Agrega el siguiente codigo a tu CSS
Código:
<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*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.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

y luego a las imagenes que quieras poner con el efecto antes del codigo de la imagen pon
Código:
<div class="hovergallery">

y al final del codigo de la imagen cierras el div con
Código:
</div>

Si son muchas imagenes las que tienes que poner el efecto basta con poner el codigo al principio de todo el codigo de la imagen y el div al final de todo el codigo de las imagenes
Metas:
[Listo] 1000 Suscriptores En YouTube
[Casi] 5,000 Seguidores En Taringa

Sigueme En Taringa

Interesante SOY Director en Producciones TPT  Interesante
WWW
#2
esta genial el codigo css, lo ocupare en mi futura web
WWW
#3
Bonito efecto, solo que lo veo medio lento, es por la web o soy solo yo?
#4
Muy buen aporte @Tamatsipatse@

Lo único es que si usas archivos CSS, no debes agregas las etiquetas <style type="text/css"> solamente lo que está dentro de las mismas
WWW
#5
lo agrege a mi web cn phpost y kedo muy bien gracias tamat!!!
#6
Lo voy a usar en mis banners.
WWW
#7
probablemente lo utilice estoy pensándomelo así que lo guardo en marcadores/favoritos
#8
Muchas gracias a todos, si no saben como integrarlo a alguna plataforma avisen y les digo como
Metas:
[Listo] 1000 Suscriptores En YouTube
[Casi] 5,000 Seguidores En Taringa

Sigueme En Taringa

Interesante SOY Director en Producciones TPT  Interesante
WWW
#9
Me gusta Sonrisa

Y el que la transicion sea paulatina, que lleve un poco de tiempo, me parece atractivo.

Una buena idea. También la anoto mentalmente Gran sonrisa
#10
Buena informacion amigo.
“Who are you to judge the life I live?
I know I'm not perfect
-and I don't live to be-
but before you start pointing fingers...
make sure you hands are clean!”
“Judge not unless you judge yourself”
― Bob Marley


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Pasar MySQL a MySQLi[POO] amner 6 231 03-05-2017, 02:05 AM
Último mensaje: ReyNexo23
  Solucionado: escribir en una imagen php firmas Sergio09 2 155 13-12-2016, 08:33 PM
Último mensaje: DarkMaster
  [Tutorial] Pasar base de datos MySQL por SSH FullPirata 1 208 11-10-2016, 04:12 PM
Último mensaje: efbsfcd
  Personalizar el cursor de la pagina aerotuning 6 486 30-04-2015, 10:07 PM
Último mensaje: Minikole
  Utilizar un loading o imagen de carga con CSS torgar22 2 367 19-12-2014, 05:09 PM
Último mensaje: amplox
  Link online para obtener html de una imagen desde word u otra página canpios 0 265 17-12-2014, 10:29 PM
Último mensaje: canpios
  Script personalizable en PHP para subir una imagen al servidor torgar22 0 607 23-11-2014, 11:26 PM
Último mensaje: torgar22
  Insertar imagen desde url [php] celticslment 7 585 14-10-2014, 03:37 AM
Último mensaje: AbaddonOrmuz
  Diseñadora de Logos, Banners y Cualquier Imagen, Diseños al gusto. likeycomparte 0 275 30-09-2014, 08:30 AM
Último mensaje: likeycomparte
  Cambiar el Zoom de mi sitio web Cine-lan 4 406 17-07-2014, 06:04 PM
Último mensaje: Vicen



Usuarios navegando en este tema: 1 invitado(s)