Foros del Web » Diseño web » CSS »

Como montar una imagen ensima de otra?

Estas en el tema de Como montar una imagen ensima de otra? en el foro de CSS en Foros del Web. Hola. He visto en muchos sitios que a los thumb les ponen imagenes ensima en el evento hover. Este es un ejemplo, la primera fotito ...
  #1 (permalink)  
Antiguo 20/04/2009, 23:02
Avatar de polin2bclan  
Fecha de Ingreso: julio-2008
Mensajes: 73
Antigüedad: 6 años, 1 mes
Puntos: 5
Como montar una imagen ensima de otra?

Hola.

He visto en muchos sitios que a los thumb les ponen imagenes ensima en el evento hover.

Este es un ejemplo, la primera fotito tiene el cursor ensima:


Y las imagenes que tiene ensima si se le da click tienen su funcion.

Me gustaria saber como es que se hace para poner una imagen ensima de otra cuando el cursor esta ensima.

Gracias
  #2 (permalink)  
Antiguo 21/04/2009, 03:34
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 6 años, 9 meses
Puntos: 4
Respuesta: Como montar una imagen ensima de otra?

No se si te refieres a esto:
Código:
a {
	background: url(css/i/untitled.jpg) no-repeat -162px;
	width: 125px;
	display: block;
	height: 125px;
	text-indent: 2000px;
}
a:hover {
	background: url(css/i/untitled.jpg) no-repeat -7px -10px;
	width: 150px;
	display: block;
	height: 125px;
}

HTML:
<a href="#">enlace</a>
Fíjate que la ruta a la foto es css/i/tu imagen.jpg, lo digo para que tu cambies la ruta o hagas la misma ruta sino no funciona.
  #3 (permalink)  
Antiguo 21/04/2009, 04:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 2 meses
Puntos: 537
Respuesta: Como montar una imagen ensima de otra?

Complementando el efecto "hover" que te ha dado Talmente

Para colocar una elemento sobre otro con css:
el elemento inferiror (en este caso tu imagen) lo colocaría en un div (puede ser como background y dandole las medidas de la imagen) pero mejor via "imag src".
Dentro del mismo div colocas los enlaces CON POSICIÓN ABSOLUTA, y con los valores left/right, top/bottom los posicionas donde desees sobre la imagen grande.

Y en el flujo del documento html primero escribes el código de la imagen grande y después los enlaces pequeños para que se muestren encima, También podrías usar "z-index" si quieres.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 29/05/2009, 23:49
Avatar de polin2bclan  
Fecha de Ingreso: julio-2008
Mensajes: 73
Antigüedad: 6 años, 1 mes
Puntos: 5
Respuesta: Como montar una imagen ensima de otra?

Muchas gracias, con sus consejos lo logré. Bendiciones
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 08:02.
SEO by vBSEO 3.3.2