Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Nugget: Styling siblings on hover
<div>
<div class="radio-btns" role="radiogroup">
<div class="radio-btns__btn" role="radio" aria-checked="false" tabindex="-1" aria-label="Select image one">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cdn-36_img-1.jpg" alt="Image description">
</div>
<div class="radio-btns__btn" role="radio" aria-checked="false" tabindex="-1" aria-label="Select image two">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cdn-36_img-2.jpg" alt="Image description">
</div>
<div class="radio-btns__btn" role="radio" aria-checked="false" tabindex="-1" aria-label="Select image three">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cdn-36_img-3.jpg" alt="Image description">
</div>
</div>
</div>
// 💡 CSS Nugget: Styling siblings on hover
// ℹ️ Use the :not CSS selector to stylize siblings on hover
// 🔗 https://codyhouse.co/nuggets/styling-siblings-on-hover
.radio-btns {
display: grid;
gap: 4px;
grid-template-columns: repeat(3, 100px);
&:hover .radio-btns__btn:not(:hover) {
filter: grayscale(100%);
&::after {
background-color: rgba(#000, 0.5);
}
}
@media (min-width: 30rem) {
grid-template-columns: repeat(3, 150px);
}
}
.radio-btns__btn {
position: relative;
cursor: pointer;
transition: .3s;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000, 0);
transition: .3s;
}
img {
display: block;
width: 100%;
max-width: 100%;
}
}
body {
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment