Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje11-08-2011, 19:01 (UTC)    
Título del mensaje: Imgallery - Aumentar imagen al pasar mouse encima

Otra vez experimentando con css, logre hacer un efecto muy bueno, pero por mas que intente no pude ponerle animación en css3, lo siento

Vista previa


Donde quieras que aparesca
Cita:
<ul class="imgallery">
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
</ul>


Rojo oscuro: Imagen pequeña
Violeta: Imagen grande


Css sin style sheet
Cita:
.imgallery{
list-style: none;
padding-top:10px;
padding-left:10px;

}
.imgallery a .imagen{
display: none;
}
.imgallery a:hover .imagen{
display: block;
position: absolute;
z-index: 1;
top: -33px;
left: -45px;
width: 125px;
height: 125px;
box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.63);
-webkit-box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.63);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.63);
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.63);
}
.imgallery img{
vertical-align: top;
width: 50px;
height: 50px;
}
.imgallery li{
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}


Rojo: Alto y ancho de la imagen
Azul: Alto y ancho de la imagen al pasar el mouse
Verde: Separación de la imagen a la plantilla

Saludos!
Si tienes una duda comentar el post

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */


Ultima edición por buzzdungeon el Mie Dic 05, 2012 8:58 pm; editado 3 veces
Mensaje11-08-2011, 19:40 (UTC)    
Título del mensaje: Re: [css] Imgallery by Buzzdungeon

Yo encontre un codigo similar al que estas Postenado , pero no lo publique noce-

Es un buen aporte
Mensaje11-08-2011, 19:45 (UTC)    
Título del mensaje: Re: [css] Imgallery by Buzzdungeon

si yo tengo otro, es bastante viejo el codigo. lo postee hace ya añitos

igual vale para los que quieran...
______________

10 años ayudando a la comunidad!!
>las cuestiones de problemas con webs se atienden en el foro.
>Ticket a: ayuda@paginawebgratis.es -- Reportes a: support-es@webme.com
Mensaje11-08-2011, 19:49 (UTC)    
Título del mensaje:

gracias, este código lo cree yo, no recordaba como se utilizaba la propiedad z-index
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje11-08-2011, 20:06 (UTC)    
Título del mensaje:

como se pone la publicidad en los recuadros,me lo podrian decir gracias
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje11-08-2011, 20:27 (UTC)    
Título del mensaje:

nuestrasxarlas escribió:
como se pone la publicidad en los recuadros,me lo podrian decir gracias


tienes que editar esta parte, puedes agregar tantas imagenes quieras;)
Cita:
<ul class="imgallery">
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
<li><a href="#"><img src="http://i.imm.io/7Vho.png"><img class="imagen" src="http://i.imm.io/7Vho.png" alt=""></a></li>
</ul>


Rojo oscuro: Imagen pequeña
Violeta: Imagen grande

ojo, la imagen chica deve ser la misma que la grande, para dar un mejor efecto
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje11-08-2011, 21:11 (UTC)    
Título del mensaje:

Quiero poner banner de mi afiliados hay como los meto,En que parte del codigo puedo meter los codigos de banners
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje11-08-2011, 21:20 (UTC)    
Título del mensaje:

Cita:
<ul class="imgallery">
<li><a href="URL"><img src="Banner 1"><img class="imagen" src="Banner 1" alt=""></a></li>
<li><a href="URL"><img src="Banner 2"><img class="imagen" src="Banner 2" alt=""></a></li>
<li><a href="URL"><img src="Banner 3"><img class="imagen" src="Banner 3" alt=""></a></li>
<li><a href="URL"><img src="Banner 4"><img class="imagen" src="Banner 4" alt=""></a></li>
<li><a href="URL"><img src="Banner 5"><img class="imagen" src="Banner 5" alt=""></a></li>
</ul>

y asi sucesivamente
Rojo oscuro: Imagen pequeña
Violeta: Imagen grande
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje11-08-2011, 21:47 (UTC)    
Título del mensaje:

Gracias ahora si lo entiendo,muy buen aporte para los usuarios de PWG,saludos amigo
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje11-08-2011, 21:50 (UTC)    
Título del mensaje:

Muy bueno Juan.

No es el mismo código para la animación?
______________
Off
Mensaje11-08-2011, 22:14 (UTC)    
Título del mensaje:

fafo-ayuda escribió:
Muy bueno Juan.

No es el mismo código para la animación?


no, no es el mismo, tampoco interfiere con el código anterior

a este no le pude poner animación, por que usa 2 imágenes, en fin, si encuentro como hacerlo lo posteo
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje01-02-2012, 15:15 (UTC)    
Título del mensaje:

Este tema ha sido promovido, ya que cumple las características para ello.

Información sobre promoción de temas a zonas dedicadas:
http://www.paginawebgratis.es/forum/viewtopic.php?t=66177
(Los diseños o artículos, serán movidos a la zona de selección, si el moderador así lo considera)

saludes,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group