Como montar una imagen ensima de otra?

polin2bclan · #1 (**permalink**) 20/04/2009, 23:02

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

talmente · #2 (**permalink**) 21/04/2009, 03:34

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.

kseso? · #3 (**permalink**) 21/04/2009, 04:22

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

polin2bclan · #4 (**permalink**) 29/05/2009, 23:49

Muchas gracias, con sus consejos lo logré. Bendiciones