Foros del Web » Creando para Internet » CSS »

Problema con efecto

Estas en el tema de Problema con efecto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/08/2009, 17:29
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 5 meses
Puntos: 38
Problema con efecto

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>

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="internet-explorer.css" />
<![endif]-->

<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>
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #2 (permalink)  
Antiguo 21/08/2009, 08:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con efecto

Pasa por www.raudi.net o por www.cssplay.co.uk
Seguro que encuentras el ejemplo que necesitas
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 21/08/2009, 09:02
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con efecto

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
  #4 (permalink)  
Antiguo 21/08/2009, 15:10
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 5 meses
Puntos: 38
Respuesta: Problema con efecto

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
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #5 (permalink)  
Antiguo 21/08/2009, 19:24
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Problema con efecto

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
  #6 (permalink)  
Antiguo 22/08/2009, 08:35
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con efecto

Pasate por aca http://www.librosweb.es/referencia/css/z-index.html
Veras como posicionar capas con respecto al eje z (propiedad z-index)
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 07:46.