[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4680
  • Last Modified:

DHTML/CSS text over image overlay

This should be pretty simple, but I'm not an expert with DHTML/CSS.
Basically, I have thumbnail images of artworks that are shown on a page and I want the title and artist name to overlay the image when a user rolls over it.
Ideally I'd like a blue opaque background overlay on top of the image with white text on top of the blue background. eg the blue background is opaque and sits on top of the image. You can still see the image, which is important for usability so that the user doesn't lose context as soon as they rollover. It also acts to make the white text clearer in case the artwork image has a lot of white in it.
many thanks!
  • 2
1 Solution
azaramAuthor Commented:
Actually, I figured out how to overlay at: http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

However, I still want to make the overlay opaque.
Any idea how to do this? Is there a css property?
azaramAuthor Commented:
OK.. I'm aswering all my own Qs...
I found the CSS properties... not sure how compatible these are across browsers yet though...

    opacity: 0.5;
OK that property will only work with Internet Explorer and is not cross browser compatiable.

Have you tried the examples in this site:

http://www.walterzorn.com/tooltip/tooltip_e.htm ?  in section 7, there is a list of commands to customise the tooltips individually... might be what your after..

here is another good site:



PAQed with points refunded (500)

EE Admin

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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