| Autor |
Mensaje |
-
buzzdungeon
Destacado
Ubicación: México
|
 11-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
|
|
|
↑
|
|
 |
-
brianpwg
Semi-Experto
|
11-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 |
|
|
↑
|
|
|
-
javidj
Experto
|
11-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 |
|
|
↑
|
|
|
-
buzzdungeon
Destacado
Ubicación: México
|
11-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 */ |
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
|
|
↑
|
|
|
-
buzzdungeon
Destacado
Ubicación: México
|
11-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 */ |
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
11-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? |
|
|
↑
|
|
|
-
buzzdungeon
Destacado
Ubicación: México
|
11-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 */ |
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
|
|
↑
|
|
|
-
fafo-ayuda
Semi-Experto
Ubicación: PaginaWebGratis.Es
|
11-08-2011, 21:50 (UTC)
Título del mensaje: |
|
|
Muy bueno Juan.
No es el mismo código para la animación?
______________
Off |
|
|
↑
|
|
|
-
buzzdungeon
Destacado
Ubicación: México
|
11-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 */ |
|
|
↑
|
|
|
-
team-soporte
Semi-Experto
|
|
|
↑
|
|
|
|
