Hovering text of semi-transparent rectangle?

rizzledon · 03-15-2012, 12:07 PM

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

Code:

#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;
  }

webdev1958 · 03-15-2012, 01:52 PM

You can take the text out of #rectangle and use css positioning to move it over #rectangle.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #rectangle {
                width: 200px;
                height: 100px;
                background-color: green;
                opacity: 0.25;
                filter: alpha(opacity=25);
                margin-right: 50px;
                margin-bottom: 30px;
                margin-top: 10px;
            }
            #p1{
                position: relative;
                top: -75px;
                left: 30px;
            }
        </style>
        <script type="text/javascript"></script>
    </head>
    <body>
        <div id="rectangle"></div>
        <p id="p1">My Text</p>
    </body>
</html>

rizzledon · 03-15-2012, 02:25 PM

Thanks mate, that was really helpful

webdev1958 · 03-15-2012, 02:27 PM

glad it's sorted