Card with Image Cutout

Introduction

In this lab, we will learn how to create a card with an image cutout using HTML and CSS. This lab will teach you how to add a colored background to a container element, create a card with an image and other content, and use the ::before pseudo-element to add a border around the figure element, creating the illusion of a cutout in the card. By the end of this lab, you will have a solid understanding of how to create visually appealing cards with image cutouts.

Skills Graph

Card With Image Cutout

index.html and style.css have already been provided in the VM.

To create a card with an image cutout, follow these steps:

1. Add a colored background to a .container element using the background property.
2. Create a .card element and add a figure element inside it with the desired image and any other content.
3. Use the ::before pseudo-element to add a border around the figure element. Set the border color to match the .container element's background color to create the illusion of a cutout in the .card.

Here is an example HTML code for the card:

<div class="container">
  <div class="card">
    <figure>
      <img alt="" src="https://picsum.photos/id/447/400/400" />
    </figure>
    <p class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
  </div>
</div>

And here is the corresponding CSS code:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 96px 24px 48px;
  background: #f3f1fe;
}

.card {
  width: 350px;
  margin: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}

.card figure {
  width: 120px;
  height: 120px;
  margin-top: -60px;
  border-radius: 50%;
  position: relative;
}

.card figure::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  border: 1rem solid #f3f1fe;
  box-shadow: 0 1px rgba(0, 0, 0, 0.1);
}

.card figure img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.card .content {
  margin: 2rem;
  text-align: center;
  line-height: 1.5;
  color: #101010;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Card With Image Cutout lab. You can practice more labs in LabEx to improve your skills.