Я пытался поместить круг в верхнем правом углу карты, не переполняясь. Я попытался поставить: переполнение; скрытый для карты и родительского контейнера, но он все еще был переполнен, но когда я попытался добавить position: относительный; (или любого другого типа) в родительский контейнер, который он внезапно сработал, и мне просто нужно было правильно расположить путь клипа.
<!DOCTYPE html>
<head>
<link href="card.css" type="text/css" rel="stylesheet">
</head>
<main>
<div class="container">
<div class="card">
<div class="img-box">
<img class="img" src="ballpen.png" alt="ballpen">
</div>
<div class="contentbx">
<h3>Pilot</h3>
<div class="pt">
<p> Thickness</p>
<span>0.5</span>
<span>0.7</span>
<span>1.0</span>
</div>
</div>
</div>
</div>
</main>
for the CSS
*{
box-sizing: border-box;
font-family: montserrat;
text-align: center;
}
.container {
width: 150px;
height: 300px;
position: relative;
}
.container .card {
background-color: red;
border-radius: 15px;
height: 100%;
overflow: hidden;
}
.container .card:hover .img {
transform: rotate(0deg);
}
.container .card:hover .img-box{
transform: translateY(0px);
}
.container .card .img-box{
transform: translateY(40px);
transition: 0.5s;
}
.container .card::before{
content: '';
background-color: black;
top: 0;
right: 0;
width: 100%;
height: 100%;
clip-path: circle(50px at 80% 10%);
position: absolute;
transition: 0.5s;
}
.container .card:hover::before {
content: '';
background-color: black;
top: 0;
right: 0;
width: 100%;
height: 100%;
clip-path: circle(80px at 80% 10%);
position: absolute;
}
.container .img-box .img {
max-width: 100%;
padding: 25px;
transform: rotate(-35deg);
transition: 0.75s;
}
.container .card:hover h3{
text-align: center;
margin-bottom: 0;
font-size: 2rem;
position: relative;
margin-top: 0;
}
.container .contentbx h3{
text-align: center;
margin-bottom: 0;
font-size: 3.5rem;
position: relative;
margin-top: 25px;
transition: 0.5s;
}
.container .contentbx p {
font-weight: 500;
}
.container .contentbx {
padding: 10px;
display: flex;
flex-direction: column;
}
.container .card:hover .pt {
transform: translateY(0px);
}
.container .contentbx .pt {
transform: translateY(100px);
transition: 0.5s;
}
.container .contentbx span:hover {
background-color: chartreuse;
cursor: pointer;
}
.container .contentbx span {
background-color: white;
padding: 2px;
border-radius: 2px;
}
снимок экрана с кодом и предварительный просмотр] 1