DHTML/CSS text over image overlay

Posted on 2007-08-06
Last Modified: 2013-11-19
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!
Question by:azaram

    Author Comment

    Actually, I figured out how to overlay at:

    However, I still want to make the overlay opaque.
    Any idea how to do this? Is there a css property?

    Author Comment

    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;
    LVL 16

    Expert Comment

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

    Have you tried the examples in this site: ?  in section 7, there is a list of commands to customise the tooltips individually... might be what your after..

    here is another good site:


    LVL 1

    Accepted Solution

    PAQed with points refunded (500)

    EE Admin

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now