Image Masking using Pure CSS

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

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖