我试图隐藏父 div 内的部分图像。在所附图像中，橙色区域代表卡片（或“父 div”），红色区域是应用了一些旋转的图像，绿色部分是图像应被“剪切”的位置。我想要实现这样的效果：图像被剪切在该角落的某个点，并且当鼠标悬停在卡片上时，动画会显示图像的隐藏部分。
我面临的主要问题是，当图像超出“父”div（卡片）的边界时，我不知道如何使图像的溢出部分不可见。我为此使用了 Tailwind CSS 和 HTML，但我不确定我当前的代码是否非常有帮助。下面是我正在使用的代码。
提前谢谢您！
<!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>
我尝试在YouTube上查找视频，在线搜索示例，甚至向ChatGPT和Claude寻求帮助，但这些尝试都没有成功。我期望找到一种简单的方法来隐藏图像的溢出部分，同时使用 Tailwind CSS 保持布局响应。此外，我想创建一个悬停效果，平滑地显示图像的隐藏部分，但我仍在努力解决如何正确处理图像溢出的问题。
您可以通过将 overflow:hidden 应用到容器来剪辑它：
.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>