Looking to create a unique image panel with three sections that expand and change backgrounds on hover. The goal is for each section to seamlessly transition to full width without needing to move the mouse out of the section area first.
Currently, the expansion works but hovering over one expanded section prevents triggering the hover animation for other sections without moving the cursor outside the current section. For a visual demonstration, check out the jsfiddle link below.
https://jsfiddle.net/tr5km94w/1/
<div class="panel-test-background">
<div class="panel-test-one"></div>
<div class="panel-test-two"></div>
<div class="panel-test-three"></div>
</div>
<div class="panel-container">
<div class="panel-one">
<div class="panel-text-one">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.01</h1>
<br />
</div>
</div>
</div>
<div class="panel-two">
<div class="panel-text-two">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.02</h1>
</div>
</div>
</div>
<div class="panel-three">
<div class="panel-text-three">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.03</h1>
</div>
</div>
</div>
</div>
<style>
// CSS styles here
</style>
The main issue I'm encountering is that an expanded section takes up the full width, causing hover events in other sections to be overridden. Any tips or solutions on how to trigger animations for multiple sections without interference are appreciated.
Thank you
For inspiration, envisioning something like the image section on basicagency.com's homepage.