This layout introduces a stylish set of interactive focus cards that react smoothly to mouse movement. The main idea is to highlight the hovered card while blurring the rest, creating a clean and modern UI effect suitable for landing pages, portfolios, and showcase sections.


The design is lightweight, responsive, and written entirely with HTML and CSS—no JavaScript required.


Key Features


  1. Smooth blur effect applied to all cards except the hovered one.
  2. Elegant zoom-in animation when hovering over any card.
  3. Dark background for strong visual contrast.
  4. Organized layout: one card on top and two at the bottom.
  5. Responsive design that adapts perfectly to smaller screens.
  6. Clean, minimalistic, and easy-to-customize code.


How the Effect Works



  1. Cards are placed inside a main container divided into two rows.
  2. Each card uses a CSS variable (--bg) to define its background image.
  3. When the user hovers on the container:
  4. All non-hovered cards apply blur, scale down, and reduced opacity.
  5. The hovered card receives:

  •       Full clarity (no blur)
  •       Smooth zoom-in effect
  •       Increased brightness
  •       Higher z-index to bring it forward

This creates a professional "focus effect" that draws attention to the selected card.


Customization Options


You can easily modify:

  • Background images
  • Text and titles
  • Hover scale amount
  • Blur intensity
  • Number of cards
  • Fonts and colors


Perfect For


  • Portfolios
  • Product showcases
  • Landing page highlights
  • Creative sections in modern websites
  • Project display layouts


Download


Download