I am currently experimenting with creating a unique layout on a webpage that features two columns. The goal is to have both columns shift towards the center if you hover over the left side, emphasizing the left column. Similarly, if you hover over the right side, both columns should slide to the right, highlighting the right column.
I have successfully achieved this effect for the left column, but I'm encountering some challenges with applying it to the right column. It appears that the first div can influence the position of the second div, but not vice versa. As a result, when I hover over the right side, only the right column moves towards the center while the left column remains stationary instead of sliding off to the side.
<style>
@import url("https://use.typekit.net/poz1xqv.css");
@import url('https://fonts.googleapis.com/css2?family=Syne:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384f5f504c780c08081616000808">[email protected]</a>&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap')
h2, h3 {
.syne-font
}
p {
.work-sans-light
}
.syne-font {
font-family: "Syne", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.work-sans-light {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
.work-sans-medium {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.cta-button {
background-color: #ffffff;
color: #000000;
transition: 1s ease;
}
.cta-button:hover {
background-color: #000000;
color: #ffffff;
transition: 1s ease;
}
.hidden-text {
display: flex;
flex-direction: column;
position: relative;
opacity: 0;
overflow: hidden;
transition: 1s ease;
}
.hidden-text:hover {
opacity: 100;
}
.feature-image:hover ~ .hidden-text,
.hidden-text:hover {
opacity: 100;
}
.sliding-section {
/* margin-left: -120px;
margin-right: 120px; */
position: relative;
margin-left: -10%;
margin-right: 10%;
width: 120%;
display: flex;
align-items: center;
overflow: hidden;
transform: translateX(0);
transition: ease 1s;
}
.residential {
position: relative;
transform: translateX(0);
transition: ease 1s;
}
.residential:hover {
transform: translateX(50px);
transition: ease 1s;
}
.residential:hover ~ .commercial{
transform: translateX(50px);
transition: ease 1s;
}
.commercial {
position: relative;
transform: translateX(0);
transition: ease 1s;
}
.commercial:hover {
transform: translateX(-50px);
transition: ease 1s;
}
.commercial:hover ~ .residential{
transform: translateX(-50px);
transition: ease 1s;
}
</style><script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'TradeGothicNext': ['"Trade Gothic Next"', 'sans-serif']
},
fontFamily: {
'Syne': ['"Syne"', 'sans-serif']
},
fontFamily: {
'Work Sans': ['"Work Sans"', 'sans-serif']
},
colors: {
greybg: '#CECCC4',
}
transitionDuration: {
'300': '300ms',
}
}
}
}
</script>
<div class="no-margin sliding-section w-screen z-3">
<div class="w-full grid grid-cols-2 gap-10">
<div class="residential feature-image">
<img class="feature-image object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img4.jpg" alt="Residential" />
<h3 class="feature-image text-right syne-font pt-4">Residential</h3>
<div class="grid grid-cols-2">
<div></div>
<div class="hid-text2 hidden-text">
<p class="hid-text2 text-right work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p>
</div>
</div>
</div>
<div class="commercial">
<img class="object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img5.jpg" alt="Commercial" />
<h3 class="text-left syne-font pt-4">Hospitality & Multi-Family</h3>
<div class="grid grid-cols-2">
<div class="hid-text2 hidden-text"><p class="hid-text2 text-left work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p></div>
<div></div>
</div>
</div>
</div>
</div>This current project showcases an interesting scenario where one child element within a parent container has the ability to affect another child element's positioning, whereas the reverse is not true. How can the relationship between these divs or elements be better understood in such cases of interaction?
Thank you for any insights and assistance!