CSS+No se ve la imagen sobre un background con efecto hover

[Bombolone]

Hola gente, ante todo buenos dias y de antemano agradezco este espacio para poder solicitar de su conocimiento, tengo vagos conociemientos de CSS, lo entiendo pero me falta un largo camino, tengo un tema particular, estoy armando unos botones los cuales quiero un efecto "hover" si bien podría hacerlo con 2 gif pero quiero poner contenido en texto, logre armar los botones y que el hover en el fondo funcione, pero cuando quiero poner una imagen arriba que seria el titulo me figura como por detrás y nose como hacerlo.

Dentro del html:

<div class="shorcut_container">

<!--Boton 1-->
<div id="shorcuts">
<img src="images/ES_shorcuts_web_cards.png" width="310" height="161">
</div>
<!--Boton 2-->
<div id="shorcuts"></div>
<!--Boton 3-->
<div id="shorcuts2"></div>

</div>

(Boton 1 y 2 son iguales= shorcuts, boton 3 es diferente,=shorcuts2, cada shorcuts llama a una imagen de background con un hover al apoyarte)

CSS:

#shorcuts {
background: url(images/shorcut.jpg) no-repeat;
background-position:0 0;
width: 310px;
height: 270px;
display: block;
text-indent: -9999px;
float:left;
position:relative;
z-index:1;

}

#shorcuts:hover { background-position: 0 -270px; }

#shorcuts2 {
background: url(images/shorcut2.jpg) no-repeat;
background-position:0 0;
width: 310px;
height: 270px;
display: block;
text-indent: -9999px;
float:left;
}

#shorcuts2:hover { background-position: 0 -270px; }


#contenido {
position:relative;
}

shorcut_container {
width:100%;
height:100%;
position:relative;
alignment-adjust:middle;
display:none;
}


Saludos y gracias!

[emprear]

A ver si entiendo,

un botón con efecto hover, el botón ademas de una imágen de fondo contiene un texto, y el texto no cambia, solo el fondo... si es asi?
Que papel cumple tu

Código HTML:

<img src="images/ES_shorcuts_web_cards.png" width="310" height="161">
 

dentro del div?

según lo que entiendo necesitas algo asi

Código HTML:

<div class="boton">
titulo boton
</div>
 

Código CSS:

div.boton{
width: 150px;
height: 50px;
line-height: 50px;
vertical-align: middle;
text-align: center;
background-image: url('boton.jpg');
float: left:
}
 
div.boton:hover{
background-image: url('boton_hover.jpg');
}
 

y si tu imagen tiene 150px x 50px, no necesitas posicionar el fondo. Si querés mejorarlo y evitar cualquier posible parpadeo, tenes que trabajar con una sola imagen de fondo de 150px x 100px (el doble de alto) y cambiar la posicion del fondo

Código CSS:

div.boton{
background-image: url('boton.jpg');
background-position: center top;
}
 
div.boton{
background-image: url('boton.jpg');
background-position: center -50px;
}
 

la es fijar con el css la posicion vertical de la imagen de fondo del boton con un valor negativo igual a la mitad del alto de la imagen...

Saludos

[Bombolone]

Hola, de antemano te agradezco por la onda y tu respuesta, te explico un toque.

voy a tratar de explicar lo mejor posible.

Es un html con 3 botones, mas que botones serian como secciones, yo los llamo botones grandes, porque incluyen un fondo con rollover (osea una imagen de background q cuando pasas por enciama cambia) y en el contenido de ese cuadrado la mitad superior lleva una imagen con un titulo hecho todo en png , y la parte inferior texto.

seria algo asi:
http://www.apple.com/ipod/ (los cuadraditos de ipod nano, ipod shouffle y Airplay TV)

a modo estructura:

--------------------------------------
i Titulo del cuadrado i
i i
i IMAGEN i
i i
--------------------------------------
i aca va todo texto segun i
i la seccion i
i i
i i
--------------------------------------

el div class es "shorcuts_container" y dentro posee 3 div id los cuales 2 son: "shorcuts" y uno es "shorcuts2" , los mismos poseen definido lo siguiente:
#shorcuts {
background: url(images/shorcut.jpg) no-repeat;
background-position:0 0;
width: 310px;
height: 270px;
display: block;
text-indent: -9999px;
float:left;
position:relative;
z-index:1;

}

#shorcuts:hover { background-position: 0 -270px; }

La idea de eso es que el background cambie, lo que hice es poner una imagen de 310 x 540px (son 2 imagenes pegadas 1 arriba y 1 abajo) cuando haces hover baja -270px de coordenadas y muestra la parte de abajo de la imagen, es una replica mas oscura, para dar el efecto de "hover"

todo esto sucede solo en el fondo, pero el contenido seria la imagen:
images/ES_shorcuts_web_cards.png
la cual no la muestra cuando la pongo dentro.


Saludos y gracias!

[emprear]

En
http://www.apple.com/ipod/
no veo ningún efecto hover, solo lo de los links del menu
y esto

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
div.boton{
width: 300px;
height: 300px;
text-align: center;
background-image: url('boton.jpg');
float: left;
}
div.boton:hover{
background-image: url('boton_hover.jpg');
}
/*]]>*/
</style>
</head>
<body>
<div class="boton">
<img src="titulo.jpg" width="300" height="150" /><br />
texto
</div>
</body>
</html>
 

muestra un div (que tiene una imagen de fondo), con una imagen dentro y un texto debajo de esa imagen y al hacer hover cambia el fondo del div


Mucho más no se me ocurre

Saludos