WordPress.org

Support

Support » Themes and Templates » [Resolved] Help with some simple CSS

[Resolved] 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)
  • 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;}

    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/

    Okay. I applied your coding above to all my links. After doing this my images aren’t showing up correctly and it as the text in between the along with a small bit of the image. What am I doing wrong?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] Help with some simple CSS’ is closed to new replies.
Skip to toolbar