How to bring an image appear on an image on-hover using sprites

Question

I am trying to make some line appear(say about 10px) after hovering mouse on an image at the bottom of the image

I saw this on MTV's website in their "You would also like these" section below every post.They use css-background sprites to do that.

I am going mad after repeated failed attempts to recreate.Everythings works,except the main onhover line coming up. This is my code so far

CSS

.yel_strip{background-position:-280px -495px; width:165px; margin:-8px 0 0 0; height:5px; position:absolute; display:none; z-index:1;}

.yel_strip:hover{ background:url(http://mtv.in.com/images/sprite_v1.png) no-repeat;}

HTML

<div class="movieL  hover_thumb">
<div><a href=""><img width="165" height="93" alt="" src=""/></a>
<div class="yel_strip"></div>
</div> </div>

Any help would be appreciated.Thanks

Answer 1

I've made working fiddle for you with no extra not needed markup in your html: http://jsfiddle.net/PJMPw/3/

Your HTML:

<a href="#" class="hoverable">
    <img src="http://placekitten.com/g/300/300" />
</a>

And CSS:

.hoverable {
    display: block;
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.hoverable:hover:after {
    bottom: 0;
}

.hoverable:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: -10px;
    left: 0;
    background: -moz-linear-gradient(left,  rgba(46,170,232,1) 0%, rgba(255,235,137,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(46,170,232,1)), color-stop(100%,rgba(255,235,137,1)));
    background: -webkit-linear-gradient(left,  rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
    background: -o-linear-gradient(left,  rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
    background: -ms-linear-gradient(left,  rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
    background: linear-gradient(to right,  rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Answer 2

This is the HTML:

Replace http://yoururl with your url.

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

This is the CSS:

Replace http//yourimage with your image address.

.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: Added EXAMPLE: http://jsfiddle.net/BmwCe/3/

Answer 3

The simples thing you could do is set a border on the image on hover.

i.e

markup

<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;
}

If you insist that you want to have a background image instead of border you could do this

<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);
}