Question

This is really a two part question. I’m struggling with two problems that I can’t figure out.

Question #1. Why does my sprite image show both images. I would expect it to show the bottom one and then on a mouse over show the top one. I’ve posted a screenshot of what is showing up. Below is both my HTML and css style I’m using. The sprite image is 50×40.

HTML

<li>
    <div class="image-wrapper">
        <div class="image-options">
            <a href="#" class="likeButton" title="Like image"><span>Like</span></a>
        </div>
        <a href="/view_profile.php?id=5693">
            <img src="photos/files/5693/grid/e1cd6ee3042f35dc7a538a5e516507e3.jpeg" />
        </a>
    </div>
</li>

CSS:

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

image-wrapper img {
position : relative;
}

.image-wrapper .image-options {
position : absolute;
top      : 0;
right    : 0;
left     : 0;
height   : 40px;
z-index  : 2;
display  : none;
background : #eeeeee;

zoom: 1;
filter: alpha(opacity=90);
opacity: 0.9;
}

.image-options .likeButton {
display: block;
width: 50px;
height: 40px;
border-right: 1px solid #dedede;
background: url('/bootstrap/img/like.png') bottom;
text-indent: -99999px;
}

.likeButton:hover {
background-position: 0 0;
}

Question #2. Why isn’t my text

Like

showing up? I’m trying to show it centered above the sprite image.

Any thoughts what I might be doing wrong?

Answer 1

1. Your .image-wrapper .image-options is 40px high – so it will show the whole sprite. To show only the half you have to change its height to 20px

2. Your .image-options .likeButton has a text-indent: -9999px – that’s why the Like text is hidden