Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/sahazorg/public_html/wp-includes/functions.php on line 6121 Warning: Cannot modify header information - headers already sent by (output started at /home/sahazorg/public_html/wp-includes/functions.php:6121) in /home/sahazorg/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1896 Warning: Cannot modify header information - headers already sent by (output started at /home/sahazorg/public_html/wp-includes/functions.php:6121) in /home/sahazorg/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1896 Warning: Cannot modify header information - headers already sent by (output started at /home/sahazorg/public_html/wp-includes/functions.php:6121) in /home/sahazorg/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1896 Warning: Cannot modify header information - headers already sent by (output started at /home/sahazorg/public_html/wp-includes/functions.php:6121) in /home/sahazorg/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1896 Warning: Cannot modify header information - headers already sent by (output started at /home/sahazorg/public_html/wp-includes/functions.php:6121) in /home/sahazorg/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1896 Warning: Cannot modify header information - headers already sent by (output started at /home/sahazorg/public_html/wp-includes/functions.php:6121) in /home/sahazorg/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1896 Warning: Cannot modify header information - headers already sent by (output started at /home/sahazorg/public_html/wp-includes/functions.php:6121) in /home/sahazorg/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1896 Warning: Cannot modify header information - headers already sent by (output started at /home/sahazorg/public_html/wp-includes/functions.php:6121) in /home/sahazorg/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1896 {"id":60,"date":"2024-09-30T23:56:39","date_gmt":"2024-09-30T23:56:39","guid":{"rendered":"https:\/\/sahaz.org\/?p=60"},"modified":"2024-10-01T00:00:39","modified_gmt":"2024-10-01T00:00:39","slug":"how-to-make-an-image-card-using-html-css","status":"publish","type":"post","link":"https:\/\/sahaz.org\/how-to-make-an-image-card-using-html-css\/","title":{"rendered":"how to make an image card using HTML\/CSS"},"content":{"rendered":"\n

Creating an image card in HTML typically involves using both HTML<\/strong> for structure and CSS<\/strong> for styling. An image card usually contains an image, some text (such as a title and description), and can include buttons or links.<\/p>\n\n\n\n

Example: Basic Image Card<\/h3>\n\n\n\n
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <style>
    .card {
      width: 300px;
      border: 1px solid #ccc;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
    }

    .card:hover {
      transform: scale(1.05);
    }

    .card img {
      width: 100%;
      height: auto;
    }

    .card-content {
      padding: 16px;
    }

    .card-title {
      font-size: 1.5em;
      margin-bottom: 8px;
    }

    .card-description {
      font-size: 1em;
      color: #555;
    }

    .card-button {
      display: inline-block;
      margin-top: 12px;
      padding: 10px 20px;
      background-color: #007BFF;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      text-align: center;
    }

    .card-button:hover {
      background-color: #0056b3;
    }
  <\/style>
  <title>Image Card Example<\/title>
<\/head>
<body>

  <div class=\"card\">
    <img src=\"https:\/\/via.placeholder.com\/300x200\" alt=\"Sample Image\">
    <div class=\"card-content\">
      <h2 class=\"card-title\">Card Title<\/h2>
      <p class=\"card-description\">This is a description of the image card. It provides some context about the image or the content inside the card.<\/p>
      <a href=\"#\" class=\"card-button\">Learn More<\/a>
    <\/div>
  <\/div>

<\/body>
<\/html>
<\/code><\/pre>\n\n\n\n
Explanation:<\/h3>\n\n\n\n
    \n
  1. HTML Structure:<\/strong>\n
      \n
    • The card is wrapped in a <div><\/code> with the class card<\/code>.<\/li>\n\n\n\n
    • Inside the card, there is an <img><\/code> tag for the image.<\/li>\n\n\n\n
    • The content, including the title (<h2><\/code>), description (<p><\/code>), and button (<a><\/code>), are inside another <div><\/code> with the class card-content<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • CSS Styling:<\/strong>\n
        \n
      • Card Styling:<\/strong> The .card<\/code> class gives the card a border, rounded corners, and a box shadow for a modern look. It also includes a hover effect that scales the card slightly when hovered.<\/li>\n\n\n\n
      • Image Styling:<\/strong> The image is made responsive by setting its width to 100%<\/code>, ensuring it fits within the card.<\/li>\n\n\n\n
      • Content Styling:<\/strong> The .card-title<\/code> and .card-description<\/code> define the style of the text. The .card-button<\/code> is styled like a button with background color and hover effects.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
        You can modify the card’s design by adjusting the width, padding, colors, and other CSS properties.<\/p>\n\n\n\n\n\n\n  \n  \n