Title: Help with some simple CSS
Last modified: August 19, 2016

---

# Help with some simple CSS

 *  Resolved [MaddTechWF](https://wordpress.org/support/users/maddtechwf/)
 * (@maddtechwf)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/help-with-some-simple-css/)
 * Okay, I’m having a moment where I can’t remember how to do this. I have 6 images
   that have a color and black/white version of each. I want the black/white to 
   be the defaults and the color to be the hover over option.
 * Can someone please help me. I would greatly appreciate it.

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

 *  Thread Starter [MaddTechWF](https://wordpress.org/support/users/maddtechwf/)
 * (@maddtechwf)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/help-with-some-simple-css/#post-1437308)
 * I’ve implemented the following code in HTML and CSS but when I move my mouse 
   over the image it flashes… How can I stop this?
 * HTML
 *     ```
       <li class="twitter"><a href="#" title="Follow Me on Twitter" target="_blank"><img src="<?php bloginfo('template_url'); ?>/style/images/twitter_32_bw.png" title="Follow Me on Twitter" /></a></li>
       ```
   
 * CSS
 *     ```
       ol#media .twitter{ background: url('../images/twitter_32.png') no-repeat; text-decoration: none; display: block; height: 32px; width: 32px; position: relative;}
       ol#media li.twitter a:hover img{visibility: hidden;}
       ```
   
 *  [gregnak](https://wordpress.org/support/users/gregnak/)
 * (@gregnak)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/help-with-some-simple-css/#post-1437309)
 * a simple example of how to switch background image when hover an object:
    Lets
   say you have this html:
 *     ```
       <ul>
       	<li><a href="#">Text</a></li>
       </ul>
       ```
   
 * and this css:
 *     ```
       li a{
       		background-image: url('path/to/image.jpg')
       		}
       	li a:hover{
       	background-image: url('path/to/image-hover.jpg')
       	}
       ```
   
 * What you have done with your css is that. When a user hover the link inside the
   list (li) with the class “.twitter” remove the image that is linked.
 * So, what happens is that it hides the image in the html, but you css says that
   the class “.twitter” should have that image as an background:
 *     ```
       ol#media .twitter{ background: url('../images/twitter_32.png') no-repeat; text-decoration: none; display: block; height: 32px; width: 32px; position: relative;}
       ```
   
 * Which should create the flickering.
 * if you need more help, pls post the html at [http://pastebin.com/](http://pastebin.com/)
 *  Thread Starter [MaddTechWF](https://wordpress.org/support/users/maddtechwf/)
 * (@maddtechwf)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/help-with-some-simple-css/#post-1437324)
 *  along with a small bit of the image. What am I doing wrong?

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

The topic ‘Help with some simple CSS’ is closed to new replies.

 * 3 replies
 * 2 participants
 * Last reply from: [MaddTechWF](https://wordpress.org/support/users/maddtechwf/)
 * Last activity: [16 years, 2 months ago](https://wordpress.org/support/topic/help-with-some-simple-css/#post-1437324)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics