CSS Tip

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;
  border-image: 
    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.

More CSS Tips