• Locked
1 reply [Last post]
Thu, 2012-03-15 12:23
rizzledon
rizzledon's picture
Offline
newbie
Last seen: 10 years 5 weeks ago
Timezone: GMT+10
Joined: 2012-03-15
Posts: 7
Points: 12

I'm trying to hover text over a semi-transparent rectangle. The only way I knew how to create the rectangle was with a div (css below). If I put the text in the #rectangle div it lowers the opacity of the text aswell. Can anyone tell me how I can hover it above the box? I can't figure it out. Thanks

 #rectangle {
	width:101px;
	height:25px;
	background-color:#ffffff;
	border:none;
	opacity:0.5;
	filter:alpha(opacity=100);
	margin-right: 50px;
	margin-bottom: 30px;
	margin-top: 10px;
  }

Top
Tags:
Sat, 2012-03-17 09:58
#1
Design My CSS
Design My CSS's picture
Offline
Regular
Last seen: 10 years 35 weeks ago
Timezone: GMT+1
Joined: 2012-02-23
Posts: 36
Points: 37

If you want just the

If you want just the background colour of the rectangle to be semi-transparent then you can just set the background colour opacity rather than everything inside the div like so:

background-color:rgba(255,255,255,0.5)

The last piece of the property is the alpha/opacity.

For more information about this you can visit http://www.w3schools.com/cssref/css_colors_legal.asp

Hope that helps!
Pete
www.designmycss.com

Top
  • Locked