Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5158
  • Last Modified:

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
0
Maxwellb
Asked:
Maxwellb
  • 4
  • 2
2 Solutions
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
b0lsc0ttCommented:
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

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now