Image Masking using Pure CSS

Share your love
Welcome to Coding Torque! Today, we are going to take your creative skills to the next level by creating a stunning card with image masking using pure CSS. This card will be a great way to show off your coding prowess and demonstrate your mastery of modern web development techniques. So, let’s get started and create something amazing!

Before we start, here are some cards you might like to create:

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome CDN  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Image Masking using Pure CSS - Coding Torque</title>
</head>

<body>
   <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

<div class="a-box">
    <div class="img-container">
        <div class="img-inner">
            <div class="inner-skew">
                <img
                    src="https://images.unsplash.com/photo-1580133748682-099a97d17e6c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
            </div>
        </div>
    </div>
    <div class="text-container">
        <h3>Jelly Fish</h3>
        <div>
            Jellyfish and sea jellies are the major part of the phylum Cnidaria.
        </div>
    </div>
</div>

Output Till Now

CSS Code 

Create a file style.css and paste the code below.

body {
  text-align: center;
  padding: 100px;
  background: #f8f4f2;
  font-family: Arial;
}

.a-box {
  display: inline-block;
  width: 240px;
  text-align: center;
}

.img-container {
  height: 230px;
  width: 200px;
  overflow: hidden;
  border-radius: 0px 0px 20px 20px;
  display: inline-block;
}

.img-container img {
  transform: skew(0deg, -13deg);
  height: 250px;
  margin: -35px 0px 0px -70px;
}

.inner-skew {
  display: inline-block;
  border-radius: 20px;
  overflow: hidden;
  padding: 0px;
  transform: skew(0deg, 13deg);
  font-size: 0px;
  margin: 30px 0px 0px 0px;
  background: #c8c2c2;
  height: 250px;
  width: 200px;
}

.text-container {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 120px 20px 20px 20px;
  border-radius: 20px;
  background: #fff;
  margin: -120px 0px 0px 0px;
  line-height: 19px;
  font-size: 14px;
}

.text-container h3 {
  margin: 20px 0px 10px 0px;
  color: #04bcff;
  font-size: 18px;
}

Output Till Now

Image Masking using Pure CSS
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖

Share your love