Image hover effect code in css 👨💻
 |
| Code output |
<html>
<head>
<style>
:root {
--primary: #d1fefc;
--secondary: #ffe1e1;
--accent: #ffeb37;
}
.artist-card {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1rem auto;
max-width: 40rem;
margin: auto;
position: relative;
box-shadow: 0.75rem -0.5rem 0 var(--accent), 0 -0.5rem 0 var(--primary),
-0.8rem -1rem 0 var(--secondary);
}
.artist-card__title {
margin: 0;
grid-column: 1 / 5;
grid-row: 2 / span 1;
align-self: center;
padding: 0.25em;
position: relative;
z-index: 1;
font-size: 9vmin;
text-align: center;
font-family: "Major Mono Display", monospace;
text-transform: uppercase;
}
.artist-card__img {
max-width: 100%;
display: block;
grid-column: 1 / -1;
grid-row: 1 / 3;
align-self: center;
}
@supports (clip-path: circle(25%)) {
.artist-card {
clip-path: circle(0%);
animation: circle-grow 2000ms 450ms forwards;
&:hover .artist-card__img {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
}
}
.artist-card__img {
clip-path: polygon(
18.11% 16.5%,
50% 0%,
75% 50%,
54.09% 90.44%,
13.7% 63.94%
);
transition: clip-path 400ms ease-in-out;
}
.artist-card__title {
clip-path: inset(50% 50%);
animation: heading-in 400ms 1000ms forwards;
}
}
@keyframes circle-grow {
to {
clip-path: circle(100%);
}
}
@keyframes heading-in {
to {
clip-path: inset(0% 0%);
}
}
@supports (mix-blend-mode: darken) {
.artist-card {
background-image: linear-gradient(
to top right,
var(--primary) 25%,
transparent
),
radial-gradient(
circle at bottom right,
transparent 15%,
var(--secondary) 15%,
var(--secondary) 20%,
transparent 20%,
transparent 22%,
var(--secondary) 22%,
transparent 30%
);
&::after {
content: "";
grid-column: 4 / 5;
grid-row: 1 / 2;
background: linear-gradient(
to bottom left,
var(--accent) 40%,
transparent
);
mix-blend-mode: multiply;
clip-path: circle(19%);
transition: clip-path 400ms ease-in-out;
}
&:hover::after {
clip-path: circle(100%);
}
}
.artist-card__img {
mix-blend-mode: multiply;
filter: grayscale(1) contrast(1.5) brightness(0.9);
}
}
@supports (-webkit-text-stroke: 1px black) {
.artist-card__title {
-webkit-text-stroke: 0.035em #001;
color: transparent;
text-shadow: 0.075em 0.075em var(--secondary);
}
}
@media screen and (min-width: 25rem) {
.artist-card__title::before {
content: "";
position: absolute;
left: 0;
top: 10%;
width: 100%;
height: 60%;
clip-path: circle(3% at 95%);
background-image: linear-gradient(
150deg,
var(--primary) 30%,
var(--secondary) 50%,
var(--accent)
);
z-index: -1;
transition: clip-path 400ms ease-in-out;
.artist-card:hover & {
clip-path: circle(100%);
}
}
}
body {
margin: 0;
padding: 0 1.5rem;
height: 100vh;
display: flex;
}
</Style>
<Body>
<div class="artist-card">
<h2 class="artist-card__title">create by. ABHISHEK</h2>
<img class="artist-card__img" src="https://drive.google.com/uc?export=view&id=1u5BffcNc9U0DNGBgsrd-r833PSb0b3K1" alt="create by. ABHISHEK">
</div>
</Body>
</Html>
Code 👨💻 file download link:👉 click me...👈
W3 School website link:👉 click here.. 👈
YouTube channel link 👉:- click here..👈
0 Comments