Grow your CSS skills. Land your dream job.

image hover problem

  • # February 22, 2012 at 3:14 pm

    < !DOCTYPE HTML>












    # February 22, 2012 at 3:35 pm

    On hover, the image (home.png) has a background image (homehover.png) but it will always be hidden by the actual image (home.png).

    In your markup, replace this:

  • home
  • with this:

  • Then change your CSS to include this:

    .home a {
    display:block;
    width: 150px;
    height: 111px;
    background:url(images/home.png) no-repeat;
    }

    .home img:hover {
    background:url(images/homehover.png) no-repeat;
    }

    There’s better ways of doing this but for what you have right now, this would probably be the quickest fix.

    # February 22, 2012 at 3:55 pm

    thanks but i want image in html beacause i want use alt tag ……
    alt tag is very important …….(seo)

    # February 22, 2012 at 4:02 pm

    Well, to be honest, having an image on your page with alt tag “home”, or no image, won’t make too much difference for SEO I think….

    But ok, if you really need it, then you could get away with this CSS:

    .home a {
    display:block;
    width: 150px;
    height: 111px;
    background:url(images/home.png) no-repeat;
    }

    .home a:hover img {
    display:none;
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".