Как сделать так, чтобы изображение появлялось на изображении при наведении, используя спрайты

Это HTML:

Замените http://yoururl своим URL-адресом.

<div class="container">
    <a href="http://yoururl" id="internal_image"><span></span></a>
</div>

Это CSS:

Замените адрес http//yourimage на ваш адрес изображения.

.container {
    width: 165px;
    height: 93px;
    background: url('http//yourimage');
    position: relative;
}

#internal_image {
    display: blocK;
    width: 165px;
    height: 93px;
}

#internal_image:hover span {
    display: block;
    width: 165px;
    height: 5px;
    position: absolute;
    background: url(http://mtv.in.com/images/sprite_v1.png) no-repeat;
    background-position: -280px -495px;
    bottom: 0;
}

EDIT: Добавлено ПРИМЕР: http://jsfiddle.net/BmwCe/3/

Простое, что вы можете сделать, это установить границу изображения при наведении.

т.е.

наценка

<div class="image-container">
        <img src="../styles/images/Desert.jpg" />
    </div>

CSS

.image-container {
    display: inline-block;
    position: relative;
}

.image-container img {
    width: 100px;
    height: 100px;
}


.image-container img:hover  {
    border-bottom: 5px solid green;
}

Если вы настаиваете на том, что хотите иметь фоновое изображение вместо границы, вы можете сделать это

<div class="image-container">
        <img src="../styles/images/Desert.jpg" />
        <div class="shiny-border"></div>
    </div>



.image-container {
    display: inline-block;
    position: relative;
}

.image-container img {
    width: 100px;
    height: 100px;
}

.image-container .shiny-border {
    position: absolute;
    top: 90px; //subtract the height of the shiny-border from 100px which is the height                      // to have the inset effect of the image 
    height: 10px;
    width: 100%;
    display: none;
}

.image-container img:hover + .shiny-border {
    display: block;
    background-image: url(../styles/images/Hydrangeas.jpg);
}