100+ CSS Hover Effects: Free Examples & Code Snippets (Page 4)

A 3D perspective card carousel with depth layering. Five cards positioned along the Z-axis using translateZ and rotateY, creating a fan-like arrangement. The container has transform: perspective(300px) rotateX(20deg); on hover, it shifts to perspective(10000px) rotateX(0deg), flattening the view. Cards initially have staggered opacity and transition delays; on hover, all become fully opaque. The center card contains an .explainer overlay that fades out on hover. Performance is decent — only transforms, opacity, and perspective changes. UX is dramatic but the depth effect may feel exaggerated.

A hover-activated card that scales and shakes while five thumbnail images fly out in random directions with random rotation. The .content card scales to 1.2, triggers a shake keyframe animation, and changes colors. Simultaneously, five .preview-image elements inside the card translate outward with random negative/positive X/Y values (between -180px to 180px) and random rotation (-10deg to 10deg). Each preview has a staggered transition delay (0.4s to 0.6s). The randomness is generated via SCSS randomNum() function at compile time, so each page load produces different fly-out trajectories. Performance is decent — transform and transition only. UX is playful but chaotic; the random offsets can feel disorienting.

A card grid where each card has a main display (icon + title) and a hover state that reveals a description and link. On hover, the card’s anchor shifts translate(-30px, -30px), changes border color, and toggles visibility between .card--display (hidden) and .card--hover (shown). A dashed .card--border element sits behind as a visual anchor, creating a “lifted” effect. Dark variant (card--dark) inverts colors. Performance is trivial — simple transform and display toggle. UX is clean and predictable.

A product card with a clip-path image that morphs on hover. The .productImage uses a 12-point polygon creating a “peeled corner” effect. On hover, the polygon shifts to a different shape (corners open outward), the image rotates -15deg, and hidden overlays (size, price, color, product name) fade in with the same rotation. The grid layout positions these overlays in four quadrants. Performance is good — only clip-path, transform, and opacity transitions. UX is clever but the clip-path change may feel abrupt.

An engaging JavaScript mouse tracking effect where grid items dynamically rotate to follow the cursor using the Math.atan2 function. This creative UI snippet leverages CSS Grid and transforms, making it a perfect choice for interactive backgrounds and immersive landing pages.

A horizontal menu where each item’s label (span) slides up from below on hover of the parent .list. The spans start with transform: translateY(100px) and transition to 0 when .list:hover. Transition delays increase by 0.05s per item (0s to 0.25s), creating a cascading wave effect. The layout uses flexbox with equal-width items. Performance is trivial — simple transform transitions. UX is smooth and playful.

A hexagonal (honeycomb) grid product catalog built with CSS clip-path polygons and complex grid math. Each product is a .star element with two layered clip-path shapes (hexagon and a 18-point star-like polygon). On hover, the inner star changes colors, the image scales up (scale(1.8)) with a drop shadow, and the text overlay disappears. The grid uses CSS Grid with responsive column counts (4 to 14 columns) and conditional visibility rules that hide certain cells based on :nth-child patterns (e.g., 8n+1 and 8n at certain breakpoints) to create a staggered honeycomb offset. Performance is good — mostly transforms and clip-paths, but the massive DOM (many repeated product entries) adds weight. UX is visually striking but navigation is unconventional.

A 3D image tilt effect driven by quadrant hover zones. Each card contains an image and four invisible <span> elements covering the four quadrants (top-left, top-right, bottom-left, bottom-right). Hovering a quadrant applies a perspective(600px) transform with rotateX and rotateY (±10deg) to the image, creating a physical “peeking” effect. The title has an animated underline that fills on hover. Grid layout: 3 columns, responsive. Performance is good — simple transforms. UX is clever and tactile.

A CSS glitch effect that activates on hover over a container image. Five stacked .c-glitch__img layers with identical background images. On hover, layers 2–5 become visible and animate with different clip-path sequences, translations, scale flips, and color overlay (layer 5 uses background-blend-mode: overlay). Each glitch animation runs for 2 seconds with multiple keyframe steps, creating random-looking horizontal slice distortions. A separate 3D flip card (avatar) and a slide-in promo panel complete the composition. Performance is good but glitch animations use many clip-path repaints. Creative but visually aggressive.

This demo illustrates how to achieve complex hover direction detection logic (top, right, bottom, left) solely via CSS by utilizing overlapping transparent links with unique clip-path masks as an implicit controller.

This complex Direction-Aware logic is achieved by utilizing four 45-degree rotated elements for direction detection and the general sibling combinator to trigger the main content transition.

A stylish 3D book effect with a realistic cover, created purely with CSS. Interactive page-flipping (rotateY) is activated on hover, demonstrating a masterful use of transform-style: preserve-3d and shadows.

Showcases advanced layering using z-index and :after pseudo-elements to introduce a large, animated overlay with new content upon hover. The design strategically uses this overlay to conceal the primary <figcaption> via a strong negative translateY transformation.

Transform a simple image block into a rich UI card by combining semantic markup with complex visual styling. The design uses a background expansion technique for the caption, where a growing ::before element creates a clean, animated fill-in effect upon interaction.

A visually striking meal plan that leverages the semantic <dl> structure to display key-value pairs (food/quantity). The layout features custom-styled leader lines within the <dd> elements, created using nested <span> and a dotted ::before pseudo-element.