CSS Tip

Avatar hover effect with a rhombus shape

Place you image inside a rhombus shape with a cool hover effect

CSS-only images with a rhombus shape

img {
  --s: 300px; /* control the size */
  
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  padding: calc(var(--s)/4) calc(var(--s)/8) 0;
  box-sizing: border-box;
  background: conic-gradient(from 135deg at 50% 15%,#e0dee1,#28a6b5 25%,#0000 0);
  clip-path: polygon(-50% 0,150% 0,50% 100%);
  transition: .5s;
}
img:hover {
  padding: 0;
}

See the Pen Hover to select your character by Temani Afif (@t_afif) on CodePen.

More CSS Tips