Avatar hover effect with a rhombus shape
Place you image inside a rhombus shape with a cool hover effect
- No extra element (only the
<img>tag) - No pseudo-element
- Less than 15 CSS declarations
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
- Select the first occurrence of an element in the whole document Select the first occurrence of any element in the whole document.
- 3D parallax effect on hover A perfect 3D parallax illusion using a single image element.
- Puzzle shapes using CSS mask A few lines of code to craft different puzzle shapes.
- The Filling CSS loaders Collection 20 CSS-only single element loaders.