View Full Version : Semi-Transparency

I <3 Lamp
06-12-2008, 06:17 PM
Hi I am creating a website for a client and they have this silly idea for a layout that I've tried (and failed) to talk them out of. Basically it is one image that will change from page to page and another image that will remain the same across all pages. The catch is that one hovers over the other. I've created this no problem with some simple CSS but now they are wanting to add a drop shadow to the image on top as it is looking jagged (which I warned them about). To do this I'm going to need to use some kind of semi-transparent layers. Does anyone know how I can accomplish this? Preferably via GIMP, but Photoshop would also help.

I've attached an image that illustrates my intentions, it's sort of dumbed down and not exactly what it's going to end up looking like, but should help describe this better than words.

Thanks in advance for any suggestions.

06-12-2008, 06:39 PM
Try just using the drop-shadow feature in gimp. Filters > Light and Shadow > Drop Shadow. You can set the opacity, x/y offset, blur radius, etc.

rnd me
06-14-2008, 09:39 AM
why not create the drop shadow in css?

use two copies of image2, and clip one about 5-10px per side.
then make the other partially transparent: "opacity: .50; filter: alpha(opacity=50);", and put it behind the first copy.

that way, it will work across any background, and you won't have to make a bunch of copies by hand.

06-14-2008, 09:55 PM
There are some CSS properties which can help: