i made card class and put image on it. After it, added circle and circle fills all the card when hover effect triggered. But after i trigger hover effect the image cuts on top side. How to disable it? I want to make it visible after hover effect same as begginnig.
Here is my code. How to change it to visible?
tried some overflow or clip elements but it didnt work at all.
body {
background: #f2f4f8;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100vh;
font-family: "Open Sans";
}
.education {
--bg-color: #FD4556;
--bg-color-light: #ffeeba;
--text-color-hover: white;
--box-shadow-color: #FD4556;
}
.credentialing {
--bg-color: #B8F9D3;
--bg-color-light: #e2fced;
--text-color-hover: #4C5656;
--box-shadow-color: rgba(184, 249, 211, 0.48);
}
.wallet {
--bg-color: #CEB2FC;
--bg-color-light: #F0E7FF;
--text-color-hover: #fff;
--box-shadow-color: rgba(206, 178, 252, 0.48);
}
.human-resources {
--bg-color: #DCE9FF;
--bg-color-light: #f1f7ff;
--text-color-hover: #4C5656;
--box-shadow-color: rgba(220, 233, 255, 0.48);
}
.card {
width: 200px;
height: 310px;
background: #fff;
border-top-right-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 14px 26px rgba(0,0,0,0.04);
transition: all 0.3s ease-out;
text-decoration: none;
border-radius: 20px;
}
.card:hover {
transform: translateY(-5px) scale(1.005) translateZ(0);
box-shadow: 0 24px 36px rgba(0,0,0,0.11),
0 24px 46px var(--box-shadow-color);
}
.card:hover .overlay {
transform: scale(4) translateZ(0);
}
.card:hover .circle {
border-color: var(--bg-color-light);
background: var(--bg-color);
}
.card:hover .circle:after {
background: var(--bg-color-light);
}
.card:hover p {
color: var(--text-color-hover);
}
.card:active {
transform: scale(1) translateZ(0);
box-shadow: 0 15px 24px rgba(0,0,0,0.11),
0 15px 24px var(--box-shadow-color);
}
.card p {
font-size: 28px;
color: #4C5656;
margin-top: 60px;
padding-top: 30px;
z-index: 1000;
transition: color 0.3s ease-out;
}
.circle {
margin-bottom: -22px;
width: 131px;
height: 131px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
transition: all 0.3s ease-out;
}
.circle:after {
content: "";
width: 118px;
height: 118px;
display: block;
position: absolute;
background: var(--bg-color);
border-radius: 50%;
top: 7px;
left: 7px;
transition: opacity 0.3s ease-out;
}
.circle svg {
z-index: 10000;
transform: translateZ(0);
}
.overlay {
width: 118px;
position: absolute;
height: 118px;
border-radius: 50%;
background: var(--bg-color);
top: 36px;
left: 50px;
z-index: 0;
transition: transform 0.3s ease-out;
}<body>
<a href="#" class="card education">
<div class="overlay"></div>
<div class="circle">
<img class="card-image" src="https://cdn.discordapp.com/attachments/998657954536489042/1106584776946745424/Raze_-_Full_body.png" style="
height: 16em;
z-index: 2000;
position: fixed;
">
</div>
<p>VALORANT
</p>
</a>
2
Answers
I would say, give position: absolute to img, it will give best results. It will show the character moving with hover without cutting image.
With top property on img, you can adjust the image position. Here is the updated code:-