Problema con efecto

luciio · #1 (**permalink**) 20/08/2009, 16:29

Hola buenas tardes.

Tengo recien una semana leyendo manuales sobre CSS/XHTML ya que siempre utilice dreamweaver para diseñar y quise acabar con eso, jaja, total que leyendo por aqui y por alla eh conseguido hacer esto: http://www.lografico.com

Tengo un problema con un efecto si se dan cuenta al entrar al sitio en la primer imagen de portafolio al poner el mouse por encima de ella se pone una imagen mas grande, el problema es que no allo como hacerle para que esa imagen mas grande se posicione de esta forma: http://www.lografico.com/prinpant.jpg quisiera que al poner el mouse encima de la imagen de portafolio, la imagen mas grande se abra y se posicione exactamente ahi (en la zona rosa de aqui: http://www.lografico.com/prinpant.jpg), eh probado de diferentes formas en el codigo pero no consigo hacerlo, lo pongo en un div y en otro y nunca, ojala pudieran ayudarme les dejo mi codigo:

CSS:

Cita:

* {margin:0;padding:0; border:0; outline:none; position: relative;}

p a:hover{ color:#575757; text-decoration:none;}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #8A8A8A;
text-decoration: none
}

#contenedor{
width: 600px;
margin-left: -300px;
left: 50%;
top: 0px
}

#div_header {
width: 450px;
height: 450px;
top: 0px;
background-image: url(imagenes/logo.jpg);
margin-bottom: 5px;
}

#div_headerchico {
width: 300px;
height: 272px;
top: 0px;
background-image: url(imagenes/headerchico.jpg);
margin-bottom: 5px;
margin-left: -150px;
left: 50%;
}

#contcuadrocentro {
width: 498px;
height: 349px;
margin-left: -249px;
background-image: url(imagenes/cuadrocentro.jpg);
left: 50%
}

#cuadrocentro {
position: absolute;
width: 424px;
height: 550px;
margin: 37px;
}

#bodyleft {
width: 185px;
height: 275px;
float: left
}

#bodyrup {
width: 230px;
margin-left: 9px;
height: 145px;
float: right
}

#bodyrdown {
width: 230px;
margin-left: 9px;
margin-top: 10px;
height: 120px;
float: right
}

#pie {
width: 430px;
height: 20px;
background: #CCCCCC;
margin-left: -215px;
left: 50%
}

#portafolio {
width: 450px;
height: 205px;
margin-bottom: 10px;
background-image:url(imagenes/fondo-portafolio2.jpg);
margin-left: -225px;
left: 50%
}

#portafolio1 {
top: 28px;
left: 22px;
position: absolute;
}

#portafolio2 {
top: 28px;
left: 129px;
position: absolute;
}

#portafolio3 {
top: 28px;
left: 236px;
position: absolute;
}

#portafolio4 {
top: 28px;
left: 343px;
position: absolute;
}

#disenoweb {
position: absolute;
top: 0px;
width: 34px;
height: 400px;
background-image: url(imagenes/disenoweb.jpg);
left: 0px
}

.corte {
clear: both;
}

P.portafolio {
font-variant: small-caps;
font-size: 14px;
top: 10px;
left: 23px
}

P.titulos1 {
font: Arial, Helvetica, sans-serif;
font-size: 11px;
font-variant: small-caps;
margin-bottom: 15px;
color: #515050
}

P.titulos1:hover{ text-decoration:underline;}

img.left {
float: left;
margin-right: 10px
}

/* GALERIIIAAAAAAA */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility: hidden;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
top: 50px;
}

/* TERMINA GALERIIIAAAAAAA */

HTML:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>LOGRAFICO. diseño web a tu medida.</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>



<body>
<div id="disenoweb"></div>
<div id="contenedor">
<div id="div_headerchico"></div>
<div id="contcuadrocentro">
<div id="cuadrocentro">
<div id="bodyleft">
<img src="imagenes/diseno-web.jpg" width="65" height="58" class="left"/>Diseño Web a Tu Medida>
Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit amet interdum. Maecenas eu elit Aliquam quis ante in ipsum auctor. Morbi volutpat leo in ligula. Integer vel magna Morbi volutpat leo in ligula.
<br />
Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit Morbi volutpat leo in ligula sodales sit Morbi volutpat leo in ligula Quisque ut magna et Fus.</div>
<div id="bodyrup">
<img src="imagenes/rightup.jpg" width="70" height="86" class="left"/>Diseño Web a Tu Medida
Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit amet interdum. Maecenas eu elit Aliquam quis ante in ipsum auctor. Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit sodales sit soda.</div>
<div id="bodyrdown">
<img src="imagenes/rightdown.jpg" width="80" height="42" class="left"/>Diseño Web a Tu Medida
Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit amet interdum. Maecenas eu elit Aliquam quis ante in ipsum auctor. Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit</div>
</div>
</div>
<div class="corte"></div>
<div id="portafolio">
<h2><p class="portafolio">portafolio</p></h2>
<div class="portafolio1">
<a class="thumbnail" href="#thumb"><img src="imagenes/clubnupcial1.jpg" width="85px" height="130px" border="0" id="portafolio1"/><span><img src="imagenes/clubnupcial.jpg" /></span></a></div>
<div class="portafolio2">
<img src="imagenes/clubnupcial.jpg" alt="portafolio2" name="portafolio2" width="85" height="130" id="portafolio2"/></div>
<div class="portafolio3">
<img src="imagenes/clubnupcial.jpg" alt="portafolio3" name="portafolio3" width="85" height="130" id="portafolio3"/></div>
<div class="portafolio4">
<img src="imagenes/clubnupcial.jpg" alt="portafolio4" name="portafolio4" width="85" height="130" id="portafolio4"/></div>
</div>
<div id="pie"></div>
</div>
</body>
</html>

kseso? · #2 (**permalink**) 21/08/2009, 07:29

Pasa por www.raudi.net o por www.cssplay.co.uk
Seguro que encuentras el ejemplo que necesitas

cristian_cena · #3 (**permalink**) 21/08/2009, 08:02

Cambia esto:

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
top: 50px;
}

Por esto:

.thumbnail:hover span{
visibility: visible;
z-index:50;
left: -130px; /*izquierda: juega con este valor, cuanto más negativo el valor más a la izquierda se posicionara tu imagen*/
top: 50px; /*arriba: juega con este valor para llevar más hacia arriba o más hacia abajo la imagen */
/*puedes jugar con right y bottom también*/
}

_________

saludos

luciio · #4 (**permalink**) 21/08/2009, 14:10

buenas !

lo que pasa es que si se posicionarlo con top y left hasta tengo la medida exacta, el problema viene que la fotografia se me posiciona debajo de otras cajas aun cuando la ponga en la capa principal, se me posiciona mal, no se como arreglar eso :S, quisiera ponerla exactamente coimo viene en la imagen y encima de todas las capas

deirdre · #5 (**permalink**) 21/08/2009, 18:24

Siguiendo lo que te aconseja cristian_cena, sólo necesitas posicionar el top y el left y darle posición absoluta, así:

Código HTML:

.thumbnail:hover span {
	position: absolute;
	visibility: visible;
	left: -25px;
	z-index: 100;
	top: -380px;
}

Bye

cristian_cena · #6 (**permalink**) 22/08/2009, 07:35

Pasate por aca http://www.librosweb.es/referencia/css/z-index.html
Veras como posicionar capas con respecto al eje z (propiedad z-index)