CSS Card Images

Please Share On:

Definition:

Here, you display your images like a flashcard using CSS property and its values.

Firstly, you have to create a container and keep images and text in that container to display like a flash card with text underneath.

See an image below of the responsive card image that we are going to learn in the below section.

Syntax:

.container {
        width: 100%;
        background-color: lavender;
        box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.6);
        margin-bottom: 15px;
      }

      .title { 
        text-align: center;
        padding: 10px 20px;;
      }

Source Code:

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

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

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

    <h2>Responsive Card 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" style="width:100%"> 
      <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:

Post Views: 787

Definition:

Syntax:

Source Code:

Output

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.