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

August · #1 (**permalink**) 25/03/2008, 03:37

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

JavierB · #2 (**permalink**) 25/03/2008, 04:07

Hola August

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

Mensaje movido desde Css.

Saludos,

cehojac · #3 (**permalink**) 25/03/2008, 04:44

Cita:

Iniciado por JavierB

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.

August · #4 (**permalink**) 25/03/2008, 09:45

Cita:

Iniciado por cehojac

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

August · #5 (**permalink**) 27/03/2008, 05:15

se ve que no me creen veanlo bien es puro css

Dalvenjha · #6 (**permalink**) 28/03/2008, 08:29

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.

JavierB · #7 (**permalink**) 28/03/2008, 09:52

Pues vale, volvamos a Css

Mikmoro · #8 (**permalink**) 28/03/2008, 12:58

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</a>

<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>

</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.

August · #9 (**permalink**) 28/03/2008, 15:58

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

Mikmoro · #10 (**permalink**) 28/03/2008, 16:52

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.

August · #11 (**permalink**) 28/03/2008, 18:35

Cita:

Iniciado por Mikmoro

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

JavierB · #12 (**permalink**) 29/03/2008, 03:56

Cita:

Iniciado por August

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,

juaniquillo · #13 (**permalink**) 29/03/2008, 09:51

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.