Survol de galerie avec :has()
HTML
index.html <h2>Hover on parent with :not() (without has)</h2>
<p>When you hover the parent, all children are blurred</p>
<div class="gallery gallery1">
<img src="https://images.unsplash.com/photo-1433477155337-9aea4e790195?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1502581827181-9cf3c3ee0106?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1503614472-8c93d56e92ce?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1438786657495-640937046d18?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
</div>
<h2>Hover on image with has and sibling</h2>
<div class="gallery gallery2">
<img src="https://images.unsplash.com/photo-1433477155337-9aea4e790195?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1502581827181-9cf3c3ee0106?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1503614472-8c93d56e92ce?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1438786657495-640937046d18?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
</div>
<h2>With has on parent</h2>
<div class="gallery gallery3">
<img src="https://images.unsplash.com/photo-1433477155337-9aea4e790195?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1502581827181-9cf3c3ee0106?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1503614472-8c93d56e92ce?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
<img src="https://images.unsplash.com/photo-1438786657495-640937046d18?crop=center&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3MTkyNjc&ixlib=rb-1.2.1&q=60&w=800&h=500" />
</div>
CSS
style.css @layer demo {
.gallery1 {
&:hover > img {
&:not(:hover) {
scale: 0.7;
filter: blur(1em);
}
&:hover {
opacity: 1;
transform: scale(1.2);
}
}
}
.gallery2 {
img {
&:hover {
opacity: 1;
transform: scale(1.2);
}
&:hover ~ img,
&:has(~ img:hover) {
scale: 0.7;
filter: blur(1em);
}
}
}
.gallery3 {
&:has(img:hover) {
img:hover {
opacity: 1;
transform: scale(1.2);
}
img:not(:hover) {
scale: 0.7;
filter: blur(1em);
}
}
}
}
@layer demoStyles {
body {
font-size: 1rem;
display: grid;
gap: 1rem;
align-items: normal;
justify-content: normal;
color: white;
}
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 3rem;
background: #333;
img {
max-width: 100%;
transition: 1s cubic-bezier(0.27, 0.91, 0.47, 0.99);
opacity: 0.7;
&:hover {
transition: all 1s cubic-bezier(0.27, 0.91, 0.47, 0.99);
}
}
}
}