Introduction
A split-screen hover slider is an effective way to showcase multiple products, services, or portfolio categories on a landing page. By dividing the screen into vertical panels that expand smoothly when hovered, you create an interactive experience that keeps visitors engaged.
In this tutorial, we will build a dynamic, responsive split-screen hover slider using semantic HTML and vanilla CSS. This method runs entirely on GPU-accelerated CSS animations, keeping your page load speed fast and your Core Web Vitals scores green.
Step 1: Writing the Semantic HTML
First, we will set up the HTML markup. We need a container wrapper and three columns, each containing an image background, an overlay title, and a hidden description block that slides up on hover.
Step 2: The Core CSS Layout
Next, we style the container using Flexbox. We set the columns to equal widths by default using flex: 1 and apply a smooth transition effect. By using flex transitions instead of JavaScript library triggers, the columns adjust their widths dynamically with hardware-accelerated speed.
Step 3: Adding Hover Transitions
Now, we define the hover states. When a column is hovered, we set flex: 2.5 (or higher), causing it to expand. The adjacent columns will automatically shrink to accommodate the change. We also animate the description text and CTA button to slide up and fade in smoothly on hover.
Step 4: Making it Responsive
To ensure the slider is mobile-friendly, we use a media query to stack the columns vertically on screens smaller than 768px, ensuring users can navigate the content easily on all mobile devices.
Conclusion
Creating custom interactive elements like a split-screen hover slider is simple with modern CSS. By utilizing flex transitions instead of JavaScript libraries, you keep your site lightweight, fast, and optimized for search engine rankings.
