javascripthtmlcsstailwind-css

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

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.

    <!--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-->

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.

Solution

  • 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>