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