Foros del Web » Creando para Internet » CSS »

Al pasar por imagen se haga grande y al picarle mas grande

Estas en el tema de Al pasar por imagen se haga grande y al picarle mas grande en el foro de CSS en Foros del Web. Hola Vi este ejemplo http://www.cssplay.co.uk/menu/lightbox3 , solo quiero saber como le puedo hacer para al pasar por una imagen se haga grande y al hacer ...
  #1 (permalink)  
Antiguo 25/03/2008, 04:37
 
Fecha de Ingreso: febrero-2005
Mensajes: 623
Antigüedad: 12 años, 9 meses
Puntos: 10
Al pasar por imagen se haga grande y al picarle mas grande

Hola

Vi este ejemplo http://www.cssplay.co.uk/menu/lightbox3, solo quiero saber como le puedo hacer para al pasar por una imagen se haga grande y al hacer click se haga mucho mas grande, igual que en el ejemplo, pero sin haber la existencia de las pestañas a las cuales les pasan el raton y se aparece la galeria

A las pestañas que no quiero ver son las de Portraits, Landscapes, Birds
  #2 (permalink)  
Antiguo 25/03/2008, 05:07
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Al pasar por imagen se haga grande y al picarle mas grande

Hola August

Si quieres que haga algo al hacer click, tendrás que usar JavaScript.

Mensaje movido desde Css.

Saludos,
  #3 (permalink)  
Antiguo 25/03/2008, 05:44
 
Fecha de Ingreso: marzo-2008
Mensajes: 342
Antigüedad: 9 años, 8 meses
Puntos: 4
Re: Al pasar por imagen se haga grande y al picarle mas grande

Cita:
Iniciado por JavierB Ver Mensaje
Hola August

Si quieres que haga algo al hacer click, tendrás que usar JavaScript.

Mensaje movido desde Css.

Saludos,
he visto la web y es un Css que utiliza divs con javascript para hacer los pases de un div a otro.
  #4 (permalink)  
Antiguo 25/03/2008, 10:45
 
Fecha de Ingreso: febrero-2005
Mensajes: 623
Antigüedad: 12 años, 9 meses
Puntos: 10
Re: Al pasar por imagen se haga grande y al picarle mas grande

Cita:
Iniciado por cehojac Ver Mensaje
he visto la web y es un Css que utiliza divs con javascript para hacer los pases de un div a otro.
Es que no usa javascript, desahabiliten el javascript en el mozilla y sigue funcionando, nada mas para que vean, chequenlo bien no invoca ninguna funcion de JS

Última edición por August; 25/03/2008 a las 10:59
  #5 (permalink)  
Antiguo 27/03/2008, 06:15
 
Fecha de Ingreso: febrero-2005
Mensajes: 623
Antigüedad: 12 años, 9 meses
Puntos: 10
Re: Al pasar por imagen se haga grande y al picarle mas grande

se ve que no me creen veanlo bien es puro css
  #6 (permalink)  
Antiguo 28/03/2008, 09:29
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Re: Al pasar por imagen se haga grande y al picarle mas grande

Ayayay caracas!! pues usa el Z:index y el img:hover pxxxxxxxxxxxx!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!! con el z index haces que se ponga por encima con el ikmg:hover le subes tamaño y con el active creo podrías hacer que sea más grande.
  #7 (permalink)  
Antiguo 28/03/2008, 10:52
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Al pasar por imagen se haga grande y al picarle mas grande

Pues vale, volvamos a Css
  #8 (permalink)  
Antiguo 28/03/2008, 13:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Al pasar por imagen se haga grande y al picarle mas grande

Sólo tienes que coger el código fuente y ver cómo está hecho.
Aplicándole unas pequeñas modificaciones, puedes eliminar las dos solapas que no querías y hacer que de inicio la galería esté a la vista.

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Simulacion tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}

/* slides styling */

.photo {width:720px; height:600px; background:url(lbox/back.jpg) no-repeat center center; text-align:left; position:relative;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:240px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(lbox/close.gif) no-repeat right top; width:479px; padding:70px 100px; border:20px solid #aaa;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li a ul li,
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li a ul li a,
.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li a ul li a img,
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a ul li a img.large,
.photo ul.topic li ul li a img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

.photo ul.topic li a:hover ul li a:hover img.large,
.photo ul.topic li:hover ul li a:hover img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li:hover ul li a:focus,
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active
{position:static; outline:0;}

.photo ul.topic li:hover ul li a:focus img,
.photo ul.topic li:hover ul li a:active img,
.photo ul.topic li a:hover ul li a:active img
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}

.photo ul.topic li:hover ul li a:focus img.large,
.photo ul.topic li:hover ul li a:active img.large,
.photo ul.topic li a:hover ul li a:active img.large
{position:absolute; left:15px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;} </style>
</head>
<body>
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#portrait1"><img src="lbox/portrait1a.jpg" alt="" title="" /><img class="large" src="lbox/portrait1.jpg" alt="" title="" /></a></li>
<li><a href="#portrait2"><img src="lbox/portrait2a.jpg" alt="" title="" /><img class="large" src="lbox/portrait2.jpg" alt="" title="" /></a></li>
<li><a href="#portrait3"><img src="lbox/portrait3a.jpg" alt="" title="" /><img class="large" src="lbox/portrait3.jpg" alt="" title="" /></a></li>
<li><a href="#portrait4"><img src="lbox/portrait4a.jpg" alt="" title="" /><img class="large" src="lbox/portrait4.jpg" alt="" title="" /></a></li>
<li><a href="#portrait5"><img src="lbox/portrait5a.jpg" alt="" title="" /><img class="large" src="lbox/portrait5.jpg" alt="" title="" /></a></li>
<li><a href="#portrait6"><img src="lbox/portrait6a.jpg" alt="" title="" /><img class="large" src="lbox/portrait6.jpg" alt="" title="" /></a></li>
<li><a href="#portrait7"><img src="lbox/portrait7a.jpg" alt="" title="" /><img class="large" src="lbox/portrait7.jpg" alt="" title="" /></a></li>
<li><a href="#portrait8"><img src="lbox/portrait8a.jpg" alt="" title="" /><img class="large" src="lbox/portrait8.jpg" alt="" title="" /></a></li>
<li><a href="#portrait9"><img src="lbox/portrait9a.jpg" alt="" title="" /><img class="large" src="lbox/portrait9.jpg" alt="" title="" /></a></li>
<li><a href="#portrait10"><img src="lbox/portrait10a.jpg" alt="" title="" /><img class="large" src="lbox/portrait10.jpg" alt="" title="" /></a></li>
<li><a href="#portrait11"><img src="lbox/portrait11a.jpg" alt="" title="" /><img class="large" src="lbox/portrait11.jpg" alt="" title="" /></a></li>
<li><a href="#portrait12"><img src="lbox/portrait12a.jpg" alt="" title="" /><img class="large" src="lbox/portrait12.jpg" alt="" title="" /></a></li>
<li><a href="#portrait13"><img src="lbox/portrait13a.jpg" alt="" title="" /><img class="large" src="lbox/portrait13.jpg" alt="" title="" /></a></li>
<li><a href="#portrait14"><img src="lbox/portrait14a.jpg" alt="" title="" /><img class="large" src="lbox/portrait14.jpg" alt="" title="" /></a></li>
<li><a href="#portrait15"><img src="lbox/portrait15a.jpg" alt="" title="" /><img class="large" src="lbox/portrait15.jpg" alt="" title="" /></a></li>
<li><a href="#portrait16"><img src="lbox/portrait16a.jpg" alt="" title="" /><img class="large" src="lbox/portrait16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div></body>
</html>
No tengo las fotos, por eso no estoy seguro del todo de si funciona bien.
Recuerda que el autor pide encarecidamente que si vas a usar su codigo, al menos lo cites y mantengas su cabecera del css:

Cita:
/* ================================================== ==============
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
Mikel.
  #9 (permalink)  
Antiguo 28/03/2008, 16:58
 
Fecha de Ingreso: febrero-2005
Mensajes: 623
Antigüedad: 12 años, 9 meses
Puntos: 10
Re: Al pasar por imagen se haga grande y al picarle mas grande

jejeje si ya lo habia logrado modificar, se tardaron en creerme que si era css, jejeje, de cualquier modo gracias sera para la otra

Saludos
  #10 (permalink)  
Antiguo 28/03/2008, 17:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Al pasar por imagen se haga grande y al picarle mas grande

Bueno, lamento decepcionarte pero cssplay exite hace bastante tiempo, y creo que por aquí todos sabemos qué cosas hacen sólo con css.

Saludos.

Mikel.
  #11 (permalink)  
Antiguo 28/03/2008, 19:35
 
Fecha de Ingreso: febrero-2005
Mensajes: 623
Antigüedad: 12 años, 9 meses
Puntos: 10
Re: Al pasar por imagen se haga grande y al picarle mas grande

Cita:
Iniciado por Mikmoro Ver Mensaje
Bueno, lamento decepcionarte pero cssplay exite hace bastante tiempo, y creo que por aquí todos sabemos qué cosas hacen sólo con css.

Saludos.

Mikel.
ya lo se, pero todos andaban diciendo que era javascript, a poco no te habias dado cuenta? jejeje
  #12 (permalink)  
Antiguo 29/03/2008, 04:56
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Al pasar por imagen se haga grande y al picarle mas grande

Cita:
Iniciado por August Ver Mensaje
jejeje si ya lo habia logrado modificar, se tardaron en creerme que si era css, jejeje, de cualquier modo gracias sera para la otra

Saludos
Pues sí, lo de hacer click en una imagen suena, y mucho a JavaScript.

Visito esa página con frecuencia y nunca deja de asombrarme.

Saludos,
  #13 (permalink)  
Antiguo 29/03/2008, 10:51
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Al pasar por imagen se haga grande y al picarle mas grande

yo también me quedé atónito al saber que era solo css. Lo primero que pensé cuando la vi fue: Uhhhhhhh!!! Yo creía que los de CSSPLAY no usaban javascript...

Pero lo más admirable es que lo que hacen en esa pagina con experimentos que muchas veces no funcionan en todos los browsers, pero esta galería funciona bien todos los browser modernos.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:49.