rollover fade with text - Webmaster Forum - Web Design, Programming and SEO forums

04-20-2009, 02:08 AM

The_Return

Status: Member
Join date: Apr 2009
Location:
Expertise: Web Design, xHtml, php
Software: Photoshop, Dreamweaver

Posts: 206

iTrader: 11 / 100%

The_Return is on a distinguished road

rollover fade with text

I'm try to get the same effect as this site http://cssremix.com/. Instead of making 50 images and rolling them over it would be easy to fade them and then add the text on top. I had no problem fading them but cannot get the text on top instead it fades with the image.

index.html

Code:

<div id="hud">
               <div class="gfx1" onmouseover="this.style.opacity='0.3'; this.style.filter.alpha.opacity='30'" 
               onmouseout="this.style.opacity='1'; this.style.filter.alpha.opacity='100'">              
</div>
       </div>

style.css

Code:

#hud {
background:#000000;
width:125px;
height:125px;
}
.gfx1 {
background:url(images/gfximage_1.jpg) no-repeat;
width:125px;
height:125px;
filter: alpha(opacity=100);
opacity: 1;
}

The out come I'm looking for is this:

04-20-2009, 08:43 PM

awatson

Status: I'm new around here
Join date: Apr 2009
Location:
Expertise:
Software:

Posts: 6

iTrader: 0 / 0%

awatson is on a distinguished road

I think the way I'd approach it is to use divs for each box, each box div containing two divs - one for the image, one for the text. Use CSS to layer them so the image is below the text. Then attach your javascript to the image and make sure it's set to change the opacity of the image, not the text. jQuery would make this pretty easy.

05-12-2009, 06:48 PM

Helmet

Status: I'm new around here
Join date: May 2009
Location:
Expertise:
Software:

Posts: 16

iTrader: 0 / 0%

Helmet is on a distinguished road

I'd recommend Mootools. I think you could just place the image as the background of a div, then within the div a paragraph displaying as block with the same dimensions as the image, then use fx.morph to make it fade in and out on mouseover.