Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Image opacity

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 472
    Comment on it

    Image Opacity is a method for creating transparent images.  Following are the examples for Image opacity :

    Creating a Transparent image.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    </style>
    </head>
    <body>
    
    <img src="new-autum.jpg" width="150" height="113" style="opacity: 0.4" ;>
    
    </body>
    </html>
    

    The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent

    Image Transparency : Hover Effect.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }
    
    img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }
    </style>
    </head>
    <body>
    
    <h1>Image Transparency: Hover Effect</h1>
    <img src="new-autum.jpg" width="150" height="113" alt="new">
    <img src="new-autum.jpg" width="150" height="113" alt="new">
    
    
    
    </body>
    </html>

    Text in Transparent Box.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.background {
        background: rgba(0, 0, 0, 0) url("new-autum.jpg") no-repeat scroll 0 0;
        border: 2px solid black;
        width: 40%;
    }
    
    div.transbox {
      margin: 30px;
      background-color: #ffffff;
      border: 1px solid black;
      opacity: 0.6;
      filter: alpha(opacity=60); /* For IE8 and earlier */
    }
    
    div.transbox p {
      margin: 5%;
      font-weight: bold;
      color: #000000;
      text-align: center;
    }
    </style>
    </head>
    <body>
    
    <div class="background">
      <div class="transbox">
        <p>Hello.</p>
      </div>
    </div>
    
    </body>
    </html>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: