Skip to main content

Heart shape with a sliding hover effect II

Another variation of the previous effect using the same code structure

A CSS only heart shape

img {
--s: 300px; /* image size */

width: var(--s);
aspect-ratio: 1;
padding: calc(.09*var(--s)) calc(var(--s)/2 - var(--_p));
box-sizing: border-box;
object-fit: cover;
radial-gradient(#e5414e 69%,#0000 70%)
84.5%/calc(var(--s)/2)/0 var(--_p);
clip-path: polygon(
calc(-41% - var(--_p)) 0,
calc(50% - var(--_p)) 91%,
calc(50% + var(--_p)) 91%,
calc(141% + var(--_p)) 0);
transition: .5s;
--_p: 0px;
img:hover {
--_p: calc(var(--s)/2);

See the Pen Heart shape image reveal II ❤️ by Temani Afif (@t_afif) on CodePen.