How to adjust opacity of an object in a website that uses templates


I am pretty new to CSS. My band's website was built using a template offered from another site. I can override the CSS with a special editor they offer. One thing I am trying to do is make an object more transparent so the background photo comes through more. I know this is done with the 'opacity' property, but I'm unsure what the coding should actually look like. I'm also interested in controlling the dimensions and placement of these object. It's a rectangle that appears on several of my pages.

Here is an example of a page that has this rectangle:

Image Hover - Reverse Opacity

Hi Guys,

I'm trying to make the image opacity rollover be reversed so that basically the images start with the opacity at 0.5 but when you rollover them it turns to 0 so you see the image properly. Basically the complete opposite of what I have now. Is it possible? I would like the text to be showing when you're not on it but when you rollover it, the read more and + button shows.

Here is the site with the images:

Hopefully that makes sense and someone can help me out Smile

If you guys need the css code I can add it no problem.

Invisible background appears when I give opacity

I don't know what's going on here! With this CSS there's no background:

.transparent {
	width: 30%;
	font: 70px Helvetica;
	font-weight: bold;
	color: red;
	background: gray;}

...but it appers if you add opacity. The only difference between those two divs is {opacity: .5} Can anybody explain me the reason? Thanks id advance.

Adding opacity to a div, using css - without effecting your background image!

Ive been exploring the use of opacity within some of my designs.
Im frustrated by the fact that when I add opacity to a div, the background image within the div appears with a really thin (maybe 1px) black line around the edge of it.

my css;

  #mainoverlay {
	filter: alpha(opacity=50);
	height: 200px;
	width: 600px;

Has anyone experienced this before?

using an input box hidden behind an image

I am trying to hide an input box behind an image so that when you click on the image, you get an upload browse window. Z-index doesn't work in Firefox with positioning in place.
I have tried opacity but it still doesn't work. Any ideas? In IE7 it works flawlessly! But in firefox, I canNOT get the input box to hide behind the image.

Syndicate content