4 replies [Last post]
ampkel
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2005-10-13
Posts: 1
Points: 0

hey how do you flip your picture when you move your mouse on it? and how do you add the fade effect/alpha effect on your friendster picuture? need help. thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

FLIPPING IMAGES. and the fade effect .. how?

You need to set the picture as the background of whatever element you're using, then use a flipped version as the background on :hover.

Verschwindende wrote:
  • CSS doesn't make pies

pearl_
Offline
newbie
Last seen: 14 years 48 weeks ago
Joined: 2005-10-20
Posts: 5
Points: 0

FLIPPING IMAGES. and the fade effect .. how?

thepineapplehead wrote:
You need to set the picture as the background of whatever element you're using, then use a flipped version as the background on :hover.

can you post an example so i'd just modify it... hope you could. thanx!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

FLIPPING IMAGES. and the fade effect .. how?

Sure!

Say for example you have a link that you want to give a background-image to.

<a href="home.html">Home</a>

You need to give it a class or ID so you can target it:

<a href="home.html" class="navlink">Home</a>

Then in your CSS you add the following:

a.navlink {
display: block;
height: 50px;
width: 150px;
}

This sets it up for a background-image. Obviously you set the width and height to that of your image.

Then you add the background-image code:

a.navlink {
display: block;
height: 50px;
width: 150px;
background: #fff url(path/to/image/image.gif) no-repeat;
}

this will add the image to it.

Then, once you have the hover image (created in something like Photoshop or the Gimp) you add the :hover rule:

a.navlink:hover {
background: #fff url(path/to/image/image_hover.gif) no-repeat;
}

and you're done!

Verschwindende wrote:
  • CSS doesn't make pies

pearl_
Offline
newbie
Last seen: 14 years 48 weeks ago
Joined: 2005-10-20
Posts: 5
Points: 0

FLIPPING IMAGES. and the fade effect .. how?

ayt, thanx. i'll try it later