Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Hovering text of semi-transparent rectangle?

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

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    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>
    Last edited by webdev1958; 03-15-2012 at 02:32 PM.

  • Users who have thanked webdev1958 for this post:

    rizzledon (03-15-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks mate, that was really helpful

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    glad it's sorted


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •