CSS Sprite :hover

  • EThire

    (@etuibenaucom)


    16 years, 5 months ago

    Hi, I’ve inserted the css below but the hover action still wont work. The site is made from f8-lite theme http://www.etuibenau.com.

    I’ve pasted the following in style.css

    .thumbnail {
    display: block;
    width: 310px;
    height: 150px;
    overflow:hidden;
    background:#eee url(‘images/x.png’);}
    .thumbnail:hover {background-position: 0 -150px;}

    and pasted the following in the home.php

    ” class=”thumbnail” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php $values = get_post_custom_values(“thumbnail”); echo $values[0]; ?>” alt=”” />

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

    (@alchymyth)

    16 years, 5 months ago

    what are you trying to achieve?
    your x.png is a 50*50px white (or transparent) image in the background behind an image – even if you shift it by 100px, nobody will see the difference.

    also, from your actual style.css:
    change this line from:
    .rollover a:hover {background-position: 0px -100px;}
    to this:
    a:hover.rollover {background-position: 0px -100px;}
    this will actually shift the background of the link on mouse hover – obviously it will still not be visible on the surface.

    Michael

    (@alchymyth)

    16 years, 5 months ago

    this has nothing to do with sprite hover – however it will give you some effect when hovering over the thumbnails:
    (there is no black&white filter for css, only opacity)

    .rollover img {
	display: block;
	width: 310px;
	height: 150px;
	overflow:hidden;
	background: url('images/x.png');-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;
}
 a:hover.rollover img {-moz-opacity:1; filter:alpha(opacity=100); opacity:1;
}

    you could add this to style.css. it will change the image from faded to clear on hover.

    Thread Starter EThire

    (@etuibenaucom)

    16 years, 5 months ago

    thanks, that works great

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

The topic ‘CSS Sprite :hover’ is closed to new replies.