How to hide half of an image within a div using Tailwind CSS and HTML?

EmanuelHosu
October 25, 2024
100 views
2 votes
3 Answers

I’m trying to hide part of an image inside a parent div. In the attached image, the orange area represents the card (or "parent div"), the red area is the image with some rotation applied, and the green section is where the image should be "cut off." I want to achieve an effect where the image is clipped at a certain point in that corner, and when hovering over the card, an animation reveals the hidden part of the image.

The main issue I’m facing is that I don’t know how to make the overflowing part of the image invisible when it exceeds the boundaries of the "parent" div (the card). I’m using Tailwind CSS and HTML for this, but I’m not sure my current code is very helpful. Below is the code I’m working with.

Thank you in advance!

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Prueba</title>

  <!--Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&family=JetBrains+Mono&display=swap" rel="stylesheet">

  <!-- CSS de Tailwind -->
  <link href="../tailwind.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-orange-500 to-orange-600 p-9 min-h-screen font-sans text-white">
  <!--Starts Projects Section-->
  <div>
    <h3 class="flex items-center mt-10 mb-4 font-bold text-2xl text-white">
      <span class="text-white/60">04.</span> PROJECTS
    </h3>

    <!--Start card 1-->
    <div class="justify-items-center bg-white/10 mb-4 p-6 rounded-lg min-w-3 h-auto">
      <!--Title and date-->
      <div class="flex justify-between items-center mb-2">
        <h4 class="font-bold text-lg">MINI JAVA VIRTUAL MACHINE</h4>
      </div>

      <!--Subtitle-->
      <div class="mb-4">
        <h5 class="text-base text-white/70">Java</h5>
      </div>

      <!--Project description-->
      <div>
        <p class="font-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut lectus laoreet, imperdiet nunc tristique.</p>
      </div>

      <!--Project Github Button and Image Container-->
      <div class="flex items-center gap-4 mt-4">
        <button class="relative items-center gap-2 bg-white shadow-lg px-6 py-3 rounded-lg font-medium text-orange-600">
            View Project
          <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 rounded-lg transition-opacity duration-300"></span>
        </button>
        
        <div class="">
            <img class="rounded-lg w-32 " width="40px" src="img/projects_screenshots/root_project.png" alt="Previwe project">
        </div>
      </div>
    </div>
    <!--Ends card 1-->
  </div>
  <!--Ends Projects Section-->

  <script src="animations.js"></script>
</body>
</html>

I tried looking up videos on YouTube, searching for examples online, and even asked ChatGPT and Claude for help, but none of these attempts were successful. I was expecting to find a simple way to hide the overflowing part of the image while keeping the layout responsive with Tailwind CSS. Additionally, I wanted to create a hover effect that smoothly reveals the hidden part of the image, but I’m still struggling with how to handle the image overflow correctly.

Answers

You can clip it by applying overflow: hidden to the container:

.container {
  width: 200px;
  aspect-ratio: 1.5;
  background: orange;
  border-radius: 8px;
  position: relative;
  
  overflow: hidden; /* <== clip overflow */
}

.image {
  position: absolute;
  width: 100px;
  aspect-ratio: 1.5;
  bottom: -15px;
  right: -15px;
  background: red;
  transform: rotate(-30deg);
}

<div class="container">
<div class="image"></div>
</div>

Stack Overflow posts should focus on one question only, so I will only answer the query about how to layout the image correctly.

Make the card a position container by applying position: relative via the relative class:

<!--Start card 1-->
<div class="… relative">

This will then allow us to use absolute positioning relative to this container to position it in the bottom right:

<img class="rounded-lg w-32 absolute -right-10 -bottom-10" …>

We can also apply some arbitrary rotation by applying transform: rotate() via a rotate-* class:

<img class="… rotate-[-30deg]" …>

Then we clip the image by applying overflow: hidden via the overflow-hidden class to the card container:

<!--Start card 1-->
<div class="… relative overflow-hidden">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Prueba</title>

  <!--Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&family=JetBrains+Mono&display=swap" rel="stylesheet">

  <!-- CSS de Tailwind -->
  <script src="https://cdn.tailwindcss.com/3.4.5"></script>
</head>
<body class="bg-gradient-to-br from-orange-500 to-orange-600 p-9 min-h-screen font-sans text-white">
  <!--Starts Projects Section-->
  <div>
    <h3 class="flex items-center mt-10 mb-4 font-bold text-2xl text-white">
      <span class="text-white/60">04.</span> PROJECTS
    </h3>

    <!--Start card 1-->
    <div class="justify-items-center bg-white/10 mb-4 p-6 rounded-lg min-w-3 h-auto overflow-hidden relative">
      <!--Title and date-->
      <div class="flex justify-between items-center mb-2">
        <h4 class="font-bold text-lg">MINI JAVA VIRTUAL MACHINE</h4>
      </div>

      <!--Subtitle-->
      <div class="mb-4">
        <h5 class="text-base text-white/70">Java</h5>
      </div>

      <!--Project description-->
      <div>
        <p class="font-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut lectus laoreet, imperdiet nunc tristique.</p>
      </div>

      <!--Project Github Button and Image Container-->
      <div class="flex items-center gap-4 mt-4">
        <button class="relative items-center gap-2 bg-white shadow-lg px-6 py-3 rounded-lg font-medium text-orange-600">
            View Project
          <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 rounded-lg transition-opacity duration-300"></span>
        </button>
        
        <img class="rounded-lg w-32 absolute -right-10 -bottom-10 rotate-[-30deg]" width="40px" src="https://picsum.photos/512/512" alt="Previwe project">
      </div>
    </div>
    <!--Ends card 1-->
  </div>
  <!--Ends Projects Section-->

  <script src="animations.js"></script>
</body>
</html>

It would’ve been solved with overflow-hidden if your requirement was not to reveal the rest of the image on hover. One way could be to use z indices. I added another div that has a higher z-index below the card, which will cover the overflowing part of the image. You can style it as you like. On hover, I change the image’s z-index to bring it on top.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prueba</title>

    <!--Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&family=JetBrains+Mono&display=swap" rel="stylesheet" />

    <!-- CSS de Tailwind -->
    <link href="../tailwind.css" rel="stylesheet" />
  </head>
  <body class="class" ="bg-gradient-to-br from-orange-500 to-orange-600 p-9 min-h-screen font-sans text-white">
    <!--Starts Projects Section-->
    <div>
      <h3 class="mb-4 mt-10 flex items-center text-2xl font-bold text-white"><span class="text-white/60">04.</span> PROJECTS</h3>

      <!--Start card 1-->
      <div class="relative z-0 h-auto min-w-3 justify-items-center rounded-lg bg-white/10 p-6">
        <!--Title and date-->
        <div class="mb-2 flex items-center justify-between">
          <h4 class="text-lg font-bold">MINI JAVA VIRTUAL MACHINE</h4>
        </div>

        <!--Subtitle-->
        <div class="mb-4">
          <h5 class="text-base text-white/70">Java</h5>
        </div>

        <!--Project description-->
        <div>
          <p class="font-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut lectus laoreet, imperdiet nunc tristique.</p>
        </div>

        <!--Project Github Button and Image Container-->
        <div class="mt-4 flex items-center gap-4">
          <button class="relative items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-orange-600 shadow-lg">
            View Project
            <span class="absolute inset-0 rounded-lg bg-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span>
          </button>
        </div>
      </div>
      <div class="relative w-full">
        <img class="absolute -right-6 -top-20 z-0 w-32 -rotate-12 rounded-lg hover:z-10" src="https://placehold.co/400" alt="Previwe project" />
      </div>
      <!--Ends card 1-->
      <div class="relative z-0 h-96 w-full bg-black"></div>
    </div>
    <!--Ends Projects Section-->

    <script src="animations.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
  </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.