Please review my code for a Flexbox layout that displays a "Learn More" button and text description when hovered over. I attempted to use the .column:hover + .hide selector, but the .hide class does not seem to be functioning properly.
I have a few questions regarding the functionality and design of the code:
- Initially, I want the button to be hidden and only shown on the right
side when hovered over. - I also want the description text to be displayed when hovering over the button.
Thank you in advance for your help!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-color: #10172b;
font-family: Poppins, Arial, "sans-serif";
color: #ffffff;
}
.container {
display: flex;
justify-content: space-between;
background: #10172b;
}
.column {
flex: 1;
background-color: #f1f1f1;
transition: flex 0.5s;
cursor: pointer;
background: #293346;
margin-right: 20px;
}
.column:hover {
flex: 0 0 60%;
}
.responsive {
max-width: 100%;
height: auto;
}
.purple {
align-self: flex-end;
background-color: #6d38f1;
color: #ffffff;
font-size: 16px;
padding: 10px 24px;
border: 0px;
box-shadow: 0px;
text-align: left;
}
.purple:hover {
background-color: #15E333;
}
.hide {
display: none;
}
.description:hover + .hide {
display: block;
}
<div class="container">
<div class="column">
<div style="padding-left: 15px;">
<h3>Services</h3>
<p class="description hide">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
</div>
<img src="https://placehold.co/400x400.png" alt="Services" class="responsive"/>
<button class="purple hide">Learn More ►</button>
</div>
<div class="column">
<div style="padding-left: 15px;">
<h3>Warehouse</h3>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
</div>
<img src="https://placehold.co/400x400.png" alt="Warehouse" class="responsive"/>
<button class="purple">Learn More ►</button>
</div>
<div class="column">
<div style="padding-left: 15px;">
<h3>IIOT</h3>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
</div>
<img src="https://placehold.co/400x400.png" alt="IIOT" class="responsive"/>
<button class="purple">Learn More ►</button>
</div>
</div>
2
Answers
If I understand you correctly, I believe this is what you want.
I added 2 rules at the bottom of the CSS.
The last rule is searching for a parent that contains a hovered button. When found, it displays the text for the first column.
More information on the
:has()
selector can be found here.Please try this