WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help with some simple CSS (4 posts)

  1. MaddTechWF
    Member
    Posted 4 years ago #

    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.

  2. MaddTechWF
    Member
    Posted 4 years ago #

    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;}
  3. gregnak
    Member
    Posted 4 years ago #

    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/

  4. MaddTechWF
    Member
    Posted 4 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.