[thelist] CSS iamge overlay/rollover...

Tris beertastic at gmail.com
Tue Dec 2 10:40:42 CST 2008

A break down...



#rolloverPlaceHolder {
  position: relative;

#imagePlaceHolder {
  width: 100px;
  height: 100px;

#overlayPlaceHolder {
  position: relative;
  width: 100px;
  height: 100px;
  visibilitY: hidden;
  z-index: 5;

#overlayPlaceHolder:hover {
  position: relative;
  width: 100px;
  height: 100px;
  visibility: visible;
  background-color: #F00;
  z-index: 10;


<div id="rolloverPlaceHolder">
  <div id="imagePlaceHolder"><img
width="100" height="100" style="border: 0px;" /></div>
  <div id="overlayPlaceHolder">Over lay text</div>



2008/12/2 ben morrison <morrison.ben at gmail.com>:
> On Tue, Dec 2, 2008 at 3:48 PM, Tris <beertastic at gmail.com> wrote:
>> Hi all...
>> I've got a few category images, where my boss wants me to do a rollover.
>> but the rollover should be a slightly opaque colored layer, with some text.
>> So you can still see the original layer underneath..
>> I've tried to do stuff with z-index etc.. but I can't use position:
>> absolute, as there are several that are dynamically being generated
>> and I won't know their positions.
> If you send us a demo url it will be easier for us to help...
> ben
> --
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !

"The only people who don't make mistakes are those who don't do anything"

Give a man a fish and he'll feed himself for a day.
Give a man a religion and he'll starve to death praying for a fish.

`We are what we pretend to be, so we must be careful what we pretend to be.`
Kurt Vonnegut

`When a person can no longer laugh at himself, it is time for others
to laugh at him.`
Thomas Szasz

More information about the thelist mailing list