Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
Hover Gallery (Efecto Hover muy chulo)
ZioGuE   16 Jun, 2011, 10:36 am
#1
Hi!. Aquí otro tuto que ya ahce tiempo habia visto y que ahora por ultima ves lo encontré en foroactivo, asi que en parte se agradece a foroactivo porque ya no encontraba ese tuto xD. (Aunque no es tan dificil)

Consiste en tener un efecto hover que hace mas grande la imagen y con una sombra alrededor. Muy util cuando se trata de una galeria. Tambien se lo podemos aplicar a los avatars en la plantilla postbit_avatar y quedará muy bien.

Ahora si, el codigo en cuestión es css, y es el siguiente:
Código:
.hovergallery img{
-webkit-transform:scale(0.9); /*Webkit: Scale down image to 0.9x original size*/
-moz-transform:scale(0.9); /*Mozilla scale version*/
-o-transform:scale(0.9); /*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.9; /*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 "AQUI EL TAMAÑO EN PIXELES DEL SHADOW" px "AQUI COLOR HEXADECIMAL DE PREFERENCIA"; /*Safari shadow version*/
-moz-box-shadow:0px 0px "AQUI EL TAMAÑO EN PIXELES DEL SHADOW"px "AQUI COLOR HEXADECIMAL DE PREFERENCIA"; /*Mozilla shadow version*/
opacity: 1;
}

Este lo van a pegar en el global.css (o el css que usen) de su tema, desde su panel de administración. Este codigo viene con algunas explicaciones dentro del mismo.

Y como decia, esto es muy sencillo, ahora solo resta colocarlo con un <div> , quedando masomenos así en donde lo coloquen:
Código:
<div class="hovergallery"><img src="AQUI LA URL DE LA IMAGEN" /></div>

Ahora, para colocarlo en los avatars de los usuarios van a ir a las palntillas de su tema, luego seleccionan postbit (caja del mensaje si no me equivoco) y seleccionan postbit_avatar y el codigo que alli tengan lo colocan entre el el div que colocamos anteriormente.
Código:
<div class="hovergallery">AQUI QUEDARÁ EL CONTENIDO</div>

También lo pueden usar para botones y queda muy chulo. Y pues bueno, eso es todo, como ven fué muy sencillo. Un saludo
Omar G.   16 Jun, 2011, 11:23 pm
#2
Nada del otro mundo y asta se podría hace en MyCode, algo como:[code][img=zoom]IMGEN[/img]

Quedaría muy bien Smile
ZioGuE   20 Jun, 2011, 7:24 pm
#3
Heep , pero queda muy bien. Wink
dark_topo   21 Jun, 2011, 10:52 am
#4
Disculpa mi ignorancia pero podrias colocar una imagen para ver como queda?

Gracias Big Grin
ZioGuE   21 Jun, 2011, 11:48 am
#5
Ok pero esque serian dos imagenes. En si lo que es, es que al pasar el cursos por una imagen la hace considerablemente mas grande. Si requieres la imagen avisame.
waylayer   21 Jun, 2011, 7:43 pm
#6
muy intresante lo evaluaré y luego comento como me fue, pero desde ya me parece genial
  
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.