Jump to content
xisto Community

Transparent Roll Over Pictures Whats the code for tranparent pictures

Recommended Posts

I dont want just transparent pictures i want a sort of rollover image. I see this done on myspace a lot. A transparent picture that when you roll over is less transparent. I want that for my site. Go to:


And look at the thumbnail at the beginning. I want that to be a transparent image that when you roll over it, it becomes less transparent. Ive seen this in HTML and CSS. Either way is fine with me.

I looked on this site and google, but never really found what i wanted. Almost everyone was only how to make it transparent, but not roll over.

Edited by BuffaloHELP (see edit history)

Share this post

Link to post
Share on other sites

The simplest way of achieving this technique is onMouse over function.


You must have two images: one transparent and default on loading, and another one to achieve desired effect when mouse is placed on top.

The page I gave as a reference is very easy to understand and customize. Hope that helps.

Additional information: you can speed up the transition by preloading images on body load. This script and tutorial is found under Tutorial section.

If you want to achieve this as CSS, it's just modifying a and a.hover and setting background-image: url(image); for both before and after. Hover is when the mouse is over any <a href="..." link. This can be used just for CLASS system where only activated when <a href="..." class="rollover"> where class rollover is set to show a different picture/text format.

PS. much better with topic title this time.

Share this post

Link to post
Share on other sites

To expand a bit on buff post on CSS rollovers it would look more like this


.home {background: url('images/home.gif') no-repeat;width: 40px;height: 31px}.home a {width: 40px;height: 31px;display: block;}.home a:hover {background: url('images/home_h.gif') no-repeat;}


Then you would apply that class to your images and your set. Of course adjust the code accordingly to fit your design.

Share this post

Link to post
Share on other sites

jlhaslip i went to that site to. I didnt even notice they had that section at the bottom. That is exactly what i want. Thank you.BuffaloHELP i know actual rollovers with two images, but i wanted just CSS design.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.