Title: Rollover Image CSS
Last modified: August 19, 2016

---

# Rollover Image CSS

 *  Resolved [hazelbug](https://wordpress.org/support/users/hazelbug/)
 * (@hazelbug)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/)
 * Hi, I’ve been trying to do this many different ways for the past 2 days… I am
   stuck.
 * My rollover images aren’t showing up in the body of my page. You can see here
   [http://www.jkltd.com/newsite/oriental-rugs/](http://www.jkltd.com/newsite/oriental-rugs/)
 * This is the code I put into my style sheet
 *     ```
       #test
       {
         display: block;
         width: 45px;
         height: 31px;
         background: url('2x3A.gif') no-repeat 0 0;
   
       }
   
       #test:hover
         {
           background: url('2x3B.gif') no-repeat 0 0;
         }
   
       #test span
       {
         display: none;
       }
       ```
   
 * This is the code I put into the HTML on my page.
    `<a id="test" title="test" 
   href="#"><span>test </span></a>`
 * But the images aren’t showing up. Anyone have an idea of what I am doing wrong?
 * THanks!!!

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

 *  [Saurus](https://wordpress.org/support/users/saurus/)
 * (@saurus)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905530)
 * “hover” is a link element and has to be included in the CSS for your links. Example:
   [
   code] a:link { color: #FF9900} a:visited { color: #CCCCCC} a:hover { font-weight:
   normal; background-color : #FF9900; color: #FFFFFF } a:active { color: #FF9900}[/
   code]
 * Unless you’re trying to do something I’ve never heard of, you need to follow 
   a similar context.
 *  [mrkingid](https://wordpress.org/support/users/mrkingid/)
 * (@mrkingid)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905531)
 * You need to do a shift not rollover. Rollover only works with Java.
 * Be right back with the code…
 *  [mrkingid](https://wordpress.org/support/users/mrkingid/)
 * (@mrkingid)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905532)
 * you need to splice the two graphics together and width and height is the size
   of your spliced graphic. What this code does is just shift the image over so 
   it acts like a rollover. In my example the graphic is 190px wide in reality by
   the code will only show half (95px) at a time.
 * For a better description see this link….
 * [http://magnetiq.com/2006/08/27/using-less-images/](http://magnetiq.com/2006/08/27/using-less-images/)
 * code…
    —————– .testrollover a{ display: block; width: 95px; height: 20px; background:
   url(images/yourgraphic.jpg) no-repeat; text-decoration: none; float: left;
 *  }
 * .testrollover a:hover {
    background-position: -95px 0;
 *  }
    ———————————
 *  Thread Starter [hazelbug](https://wordpress.org/support/users/hazelbug/)
 * (@hazelbug)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905646)
 * Thanks for your response.
 * **I put this in my CSS style sheet**
 *     ```
       .testrollover a
       {
       display: block;
       width: 45px;
       height: 31px;
       background: url('images/2by3Rugs.gif') no-repeat;
       text-decoration: none;
       float: left;
   
       }
   
       .testrollover a:hover
       {
       background-position: -95px 0;
   
       }
       ```
   
 * **And this in the HTML window on my page. **
    `<a id="testrollover" href="#">
   </a>`
 * It’s right above the words “Original Image”. Same result.
    I don’t know what 
   I am doing wrong?!
 *  [mrkingid](https://wordpress.org/support/users/mrkingid/)
 * (@mrkingid)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905675)
 * In testrollever a:hover you need the background position coords to be
 * background-position: -45px 0;
 * I take it the image is 90 px’s wide
 * Also make sure your pointing the correct URL for the image location
 * and your HTML text should be
 * `<div class="testrollover"><a href="#"> </a></div>`
 * If you still have an issue with it not working. post a link to the URL page and
   I can have a look at it.
 *  Thread Starter [hazelbug](https://wordpress.org/support/users/hazelbug/)
 * (@hazelbug)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905688)
 * I am in love with you! Thank you so much!!! It worked. sigh.
    I kept putting 
   in “a” instead of “div”
 * It’s always the little things.
    Thanks for taking the time. It’s much appreciated!
 *  [mrkingid](https://wordpress.org/support/users/mrkingid/)
 * (@mrkingid)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905749)
 * You are more than welcome. I am glad it worked out for you. 🙂
 *  [LEVI44](https://wordpress.org/support/users/levi44/)
 * (@levi44)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905921)
 * This is great! The only thing is i can’t work out how i can change the URL it
   goes to….any ideas?
 *  [hoov](https://wordpress.org/support/users/hoov/)
 * (@hoov)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905922)
 * LEVI, just change the # sign to whatever URL you want the link to take you to.

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

The topic ‘Rollover Image CSS’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 5 participants
 * Last reply from: [hoov](https://wordpress.org/support/users/hoov/)
 * Last activity: [16 years, 6 months ago](https://wordpress.org/support/topic/rollover-image-css/#post-905922)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics