Expand on hover using CSS

Learn how to create an engaging hover effect where one card expands while another reduces using basic CSS and Javascript

Example site:

View example

Description:

This tutorial guides you through creating a dynamic card layout effect using HTML and CSS. You'll learn how to build a two-column layout with cards that respond to hover actions, expanding one card while simultaneously reducing the other. The tutorial covers layout structuring, content placement, and CSS animation techniques to achieve this interactive effect.

Instructions:

Set up the basic layout: Create a container with two columns Place a container for each card within the columns. Set initial widths for the cards (e.g., 52vw for the left, 40vw for the right) Add a vertical gap between cards (in vw units) Adjust the main container's column width to "max-content"
Add content to the cards:Insert text and images as needed For the closed (smaller) card, decide which elements to hide Set the opacity of hidden elements to 0 using the adjust panel
Implement CSS animations:Create a CSS class for card animation Add a class for image appearance/disappearance Apply these classes using the onMouseIn event
Fine-tune the effect:Adjust vw values in both HTML and CSS as needed Ensure smooth transitions between states
Test and refine:Check the hover effect on different screen sizes Make any necessary adjustments to ensure a consistent experience

Code:

Page code

CSS

Custom element

CUSTOM ELEMENT CODE WILL SHOW HERE

.imageOpacityOn { opacity: 1; transition: 0.5s } .imageOpacityOff { opacity: 0; transition: 0.5s } @media (min-width: 1025px) { .transition-small, .second-transition-small { width: 40vw; transition: width 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .transition-big, .second-transition-big { width: 52vw; transition: width 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); } }

$w.onReady(function () { animatedCards() }); function animatedCards() { $w('#leftParentBox').onMouseIn(() => { $w('#leftParentBox').customClassList.add('transition-big') $w('#rightParentBox').customClassList.add('transition-small') $w('#rightImage').customClassList.add('imageOpacityOn') $w('#leftImage').customClassList.add('imageOpacityOff') $w('#leftParentBox').customClassList.remove('second-transition-small') $w('#rightParentBox').customClassList.remove('second-transition-big') $w('#rightImage').customClassList.remove('imageOpacityOff') $w('#leftImage').customClassList.remove('imageOpacityOn') }) $w('#rightParentBox').onMouseIn(() => { $w('#leftParentBox').customClassList.add('second-transition-small') $w('#rightParentBox').customClassList.add('second-transition-big') $w('#leftImage').customClassList.add('imageOpacityOn') $w('#rightImage').customClassList.add('imageOpacityOff') $w('#leftParentBox').customClassList.remove('transition-big') $w('#rightParentBox').customClassList.remove('transition-small') $w('#rightImage').customClassList.remove('imageOpacityOn') $w('#leftImage').customClassList.remove('imageOpacityOff') }) }