Transparent mouseover of image with text on top

Hi experts,

Question: Is it possible to put a transparent overlay over an image with words on top when someone mouses over that image? So for instance, when someone mouses over a picture of a computer, the image gets darker and the computer's name and specs appear over top of the image. Then, when clicked on, it will take the viewer to a page where they can purchase the computer. I know it would be possible using many, many images and using onMousOver, etc., but I am looking for a more dynamic way to do this as I will be doing (hopefully) many of these.


Thank you for your time and expertise,
Max
MaxwellbAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
VirusMinusCommented:
here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
      a.product{position:relative;display:block;width:289px;height:256px;}
      a.product:hover{background:#666;}
      a.product span{display:none;}
      a.product:hover span{display:block;color:#fff;position:absolute;top:0;left:0;width:269px;height:236px;padding:10px;background:#666;z-index:999;cursor:pointer;opacity: 0.80; filter:alpha(opacity=80);}
</style>
</head>

<body>

<a href="#" class="product"><img src="http://www.payam.com.au/Images/dell/dell_pc.jpg" border="0"><span>Dell Computer<br>More Information<br>2GB RAM<br>100GB Hard Drive</span></a>


</body>
</html>
0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
MaxwellbAuthor Commented:
Hi VirusMinus,

Thanks for your quick response! Sorry I took so long to respond. Everything looks great! Really nice job! :) Is it possible though, to have the title larger than the description?

Thank you for your time,
Max
0
 
VirusMinusCommented:
Sure, you could do this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
      a.product{position:relative;display:block;width:289px;height:256px;}
      a.product:hover{background:#666;}
      a.product span{display:none;}
      a.product:hover span{display:block;color:#fff;position:absolute;top:0;left:0;width:269px;height:236px;padding:10px;background:#666;z-index:999;cursor:pointer;opacity: 0.80; filter:alpha(opacity=80);}
      a.product span b{font-size:130%}
</style>
</head>

<body>

<a href="#" class="product"><img src="http://www.payam.com.au/Images/dell/dell_pc.jpg" border="0"><span><b>Dell Computer</b><br>More Information<br>2GB RAM<br>100GB Hard Drive</span></a>


</body>
</html>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
MaxwellbAuthor Commented:
Hi,

Sorry I haven't replied in a while; just recently had the time to implement this. Looks great! Except for one problem...the opacity does not seem to be working in Internet Explorer 7. Does IE not support opacity? Here is the link to the page I have it set up on: http://www.bestchoiceautorentals.com/index.php?page=vehicles

Thanks,
Max
0
 
MaxwellbAuthor Commented:
Hi,

The problem with IE7 was related to my computer! Works perfectly one issue was resolved. Full points awarded.

Thank You,
Max
0
 
b0lsc0ttIT ManagerCommented:
Maxwellb,

What do you mean?  How do you want the points awarded?

It is easiest if you do this yourself by clicking the option to Accept or Accept Multiple Solutions.  Let me know if you have a question about doing this.  If one or more of the experts did help you should close this by accepting the comment(s).  If you don't close this yourself then please explain what you meant by the above.

b0lsc0tt
EE Cleanup Volunteer
0
 
MaxwellbAuthor Commented:
Sorry, after all that I forgot to accept it as a solution....
Max
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.