CSS code to center an image Archives

CSS Transparent Images

Please Share On:

Definition:

CSS transparent images mean you can display your image with different opacity. The opacity value starts from 0.0 to 1. 0.0 is fully transparent and 1 is the less transparent.

See the below image of two transparent images with different opacity values:

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image1 {
        opacity: 0.5;
        padding: 20px;
      }

      .image2 {
        opacity: 1.0;
        padding: 20px;
      }
    </style>
  </head>
  
  <body>
    <table style="border: 2px solid grey;">
      <tr>
        <th>Image Transparent is 50%</th>
        <th>Image Transparent is 100%</th>
      </tr>
      <tr> 
      <td>
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" class="image1" width="170" height="100">
      </td>
        <td>
           <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" class="image2" width="170" height="100">
        </td>
      </tr>
      
    </table>
  </body>
</html>

Output:

Try it yourself

To understand in detail, click the “CSS Opacity” tutorial

Donate to support writers.

You may be interested in the following topics:

CSS Center an Images

Please Share On:

Definition:

Today, you will learn how to center an image using CSS code. To center an image you need to set left and right margin to auto and make an element a block.

See an image which is centered in a container.

Syntax:

img { 
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 50%
      }

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin:20px;
      }

      .container {
        width: 100%;
        background-color: lavender;
        box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.6);
        margin-bottom: 15px;
      }
      
      img { 
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 50%
      }

      .title, h2 { 
        text-align: center;
        padding: 10px 20px;;
      }
    </style>
  </head>
  <body>

    <h2>Center an Images</h2>

    <div class="container">
      <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sydney-Harbour-Bridge-View.jpg" alt="Sydney Harbour Bridge" > 
      <div class="title">
        <p>Sydney Harbour Bridge</p>
      </div>
    </div>

  </body>
</html>

Output

Click “TRY IT YOURSELF” to see the results.

Try it yourself

Donate to support writers.

You may be interested in the following topics:

Tag: CSS code to center an image

CSS Transparent Images

Definition:

Source Code:

Output:

CSS Center an Images

Definition:

Syntax:

Source Code:

Output

Copyright @2023. All Right Reserved.