Title: CSS Sprite :hover
Last modified: August 19, 2016

---

# CSS Sprite :hover

 *  [EThire](https://wordpress.org/support/users/etuibenaucom/)
 * (@etuibenaucom)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/css-sprite-hover/)
 * Hi, I’ve inserted the css below but the hover action still wont work. The site
   is made from f8-lite theme [http://www.etuibenau.com](http://etuibenau.com).
 * I’ve pasted the following in style.css
 * .thumbnail {
    display: block; width: 310px; height: 150px; overflow:hidden; background:#
   eee url(‘images/x.png’);} .thumbnail:hover {background-position: 0 -150px;}
 * and pasted the following in the home.php
 * ” class=”thumbnail” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?
   php $values = get_post_custom_values(“thumbnail”); echo $values[0]; ?>” alt=””/
   >

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/css-sprite-hover/#post-1321929)
 * what are you trying to achieve?
    your x.png is a 50*50px white (or transparent)
   image in the background behind an image – even if you shift it by 100px, nobody
   will see the difference.
 * also, from your actual style.css:
    change this line from: `.rollover a:hover {
   background-position: 0px -100px;}` to this: `a:hover.rollover {background-position:
   0px -100px;}` this will actually shift the background of the link on mouse hover–
   obviously it will still not be visible on the surface.
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/css-sprite-hover/#post-1321935)
 * this has nothing to do with sprite hover – however it will give you some effect
   when hovering over the thumbnails:
    (there is no black&white filter for css, 
   only opacity)
 *     ```
       .rollover img {
       	display: block;
       	width: 310px;
       	height: 150px;
       	overflow:hidden;
       	background: url('images/x.png');-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;
       }
        a:hover.rollover img {-moz-opacity:1; filter:alpha(opacity=100); opacity:1;
       }
       ```
   
 * you could add this to style.css. it will change the image from faded to clear
   on hover.
 *  Thread Starter [EThire](https://wordpress.org/support/users/etuibenaucom/)
 * (@etuibenaucom)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/css-sprite-hover/#post-1322103)
 * thanks, that works great

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Sprite :hover’ is closed to new replies.

## Tags

 * [hover](https://wordpress.org/support/topic-tag/hover/)
 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [EThire](https://wordpress.org/support/users/etuibenaucom/)
 * Last activity: [16 years, 5 months ago](https://wordpress.org/support/topic/css-sprite-hover/#post-1322103)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics