Image Card with HTML and CSS

In this post, I'll teach you how to create a beautiful image card with a hover effect using HTML and CSS.

This card can be a great addition to your web projects, giving a visually appealing look with smooth animations.

HTML Structure

  
<div class="card">
  

     <div class="content">
  
  

     <h1>Nature</h1>
  
  

     <p>Lorem ipsum dolor sit
      amet consectetur adipisicing elit.</p>
  
  

     <button class="btn">Learn
      More</button>
  
  

     </div>
  
  
</div>
  

Explanation:

<div class="card">: This is the outer container for the card. It holds all the elements inside the card.

<div class="content">: This inner container holds the text content of the card, such as the title, description, and button.

<h1>: This is the title of the card. In this example, it's just "Nature." U can give what you want to display.

<p>: A paragraph providing additional text or description.

<button class="btn">: A button that the user can click to learn more

CSS Styling

  

    @import
    url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
  
  


  
*{
  

     font-family: 'Poppins',
      sans-serif;
  
  

     padding: 0;
  
  

     margin: 0;
  
  
}
  


  
body {
  

     height: 100vh;
  
  

     display: flex;
  
  

     justify-content: center;
  
  

     align-items: center;
  
  
}
  


  
.card {
  

     position: relative;
  
  

     width: 400px;
  
  

     height: 500px;
  
  

     border-radius: 15px;
  
  

     overflow: hidden;
  
  

     filter: drop-shadow(10px 10px
      20px rgba(0, 0, 0, 0.25));
  
  

     background-image:
      url("example.jpg");
  
  

     background-repeat:
      no-repeat;
  
  

     background-size: cover;
  
  
}
  


  
.card::after {
  

     content: "";
  
  

     position: absolute;
  
  

     top: 0;
  
  

     left: 0;
  
  

     width: 100%;
  
  

     height: 100%;
  
  

     background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.408)
      62.83%, rgba(0, 0, 0, 0.8) 99.99%);
  
  

     background-blend-mode: darken,
      normal;
  
  
}
  


  
.card > .content {
  

     color: white;
  
  

     position: absolute;
  
  

     top: 435px;
  
  

     left: 4.77%;
  
  

     right: 4.77%;
  
  

     z-index: 2;
  
  

     transition: top 450ms
      ease-out;
  
  
}
  


  
.card > .content > h1 {
  

     font-size: 2.5rem;
  
  
}
  


  
.card > .content > p {
  

     margin-bottom: .7rem;
  
  
}
  


  
.card:hover > .content {
  

     top: 300px;
  
  
}
  


  
.btn {
  

     border: none;
  
  

     padding: .7em 1.8em;
  
  

     border-radius: 5px;
  
  

     font-weight: 600;
  
  

     cursor: pointer;
  
  

     font-size: .8rem;
  
  
}
  


  
.btn-card {
  

     background: #D0EEB0;
  
  

     transition: background 200ms
      ease;
  
  
}
  


  
.btn-card:hover {
  

     background: #bfed8e;
  
  
}

Explanation:

Font and Basic Styles: 

We use the 'Poppins' font to make the text look modern and clean. The * selector targets all elements on the page.

Styling the Body:

• height: 100vh; makes the body take up the full height of the viewport.
• display: flex; turns the body into a flexbox container.
• justify-content: center; horizontally centers the card.
• align-items: center; vertically centers the card.

Card Container:

• position: relative; allows for absolute positioning of elements inside the card.
• width and height set the size of the card.
• border-radius: 15px; rounds the corners of the card.
• overflow: hidden; ensures that any content outside the card’s boundaries is not visible.
• filter: drop-shadow(...) adds a shadow effect around the card, giving it a 3D-like appearance.
• background-image: url(...); sets the background image for the card.
• background-repeat: no-repeat; ensures the image doesn't repeat.
• background-size: cover; makes sure the background image covers the entire card.

Gradient Overlay

• content: ""; is required for pseudo-elements like ::after.
• position: absolute; positions this gradient overlay within the card, covering the entire card.
• top and left ensure the overlay starts at the top-left corner.
• width: 100%; and height: 100%; make the overlay cover the whole card.
• background: linear-gradient(...) creates a gradient that starts transparent at the top and becomes darker toward the bottom, helping the text stand out.
• background-blend-mode: darken, normal; blends the gradient with the background image to create a darkening effect.

Content Positioning:

• color: white; sets the text color to white for visibility.
• position: absolute; places the content within the card.
• top: 435px; positions the content near the bottom of the card.
• left and right set margins, centering the content horizontally within the card.
• z-index: 2; ensures the content stays above the gradient overlay.
• transition: top 450ms ease-out; smoothly moves the content up when the card is hovered over.

Styling the Title and Paragraph:

• font-size: 2.5rem; makes the title (h1) larger and more prominent.
• margin-bottom: .7rem; adds space below the paragraph, separating it from the button.

Hover Effect

When the card is hovered over, the top position of the content changes to 300px, moving it upward within the card.

Button Styles

• border: none; removes the default button border.
• padding: .7em 1.8em; adds space inside the button, making it larger and more clickable.
• border-radius: 5px; rounds the button’s corners.
• font-weight: 600; makes the text inside the button bolder.
• cursor: pointer; changes the cursor to a pointer when hovering over the button.
• font-size: .8rem; sets the size of the button text.
• background: #D0EEB0; sets a light green background color for the button.
• transition: background 200ms ease; makes the background color change smoothly when hovered over.

Thanks for reading