Question 45836 in CSS Question posted in
Some basic documentation can be found here.

How can I use the :has() selector to add animation to preview sibling when hovering over a specific element? – CSS

I have a code with three article cards, each containing an image and description. When I hover over a specific card, I want to blur the preview and the next card sibling.

I tried using the ~ selector, but it only selects the next sibling.

.articles>*:hover ~ * {
    filter: blur(1px);
}

Then, I tried using the :has() selector to select the preview sibling, but it didn’t work.

Maybe i do something wrong?

.articles>*:hover:has(~ .articles>*) {
    filter: blur(1px);
}

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap");
body {
  font-family: "Work sans", Arial, Monospace, sans-serif;
  background-color: #282a3a;
}

h3 {
  font-weight: 800;
  font-size: clamp(1.13rem, calc(0.86rem + 1.05vw), 1.65rem);
  margin-block: 1rem;
  color: #10cab7;
}

p {
  font-weight: 400;
  font-size: calc(1rem + 1px);
  color: #829299;
}

.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 4rem;
  gap: 2rem;
  cursor: pointer;
}

.articles>* {
  transition: all 0.5s ease;
  background-color: #181823;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 1.5px rgba(0, 0, 0, 0.306);
}

.articles>*:hover {
  box-shadow: 0px 2px 2px 3px rgba(0, 0, 0, 0.306);
  transform: scale(1.03);
}


/* add blur to all next sibling article cards when you hover over on a specific card */

.articles>*:hover~* {
  filter: blur(1px);
}


/* add blur to all preview sibling article cards when you hover over on a specific card */

.articles>*:hover:has(~.articles>*) {
  filter: blur(1px);
}

.articles img {
  display: block;
  max-width: 100%;
  border-bottom: solid 3px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  -webkit-border-image: linear-gradient( to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  -moz-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  -ms-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  border-image-width: 0px 0px 4px auto;
}

.articles .article-desc {
  padding: 2rem;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
<div class="articles bkg-gray">

  <div class="article-1">
    <img src="https://i.imgur.com/nzK9N7l.png" alt="services">

    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
    </div>
  </div>
  <div class="article-2">
    <img src="https://i.imgur.com/5EOzUIQ.png">

    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
    </div>
  </div>
  <div class="article-3">
    <img src="https://i.imgur.com/7cnLyBD.png" alt="services">
    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempor.</p>
    </div>

  </div>
</div>
Tags:

2

Answers


  1. 0

    You could use this CSS:

    .articles:hover > *:not(:hover) {
    filter: blur(1px);
}

    When you enter .articles with your mouse it will blur all the articles, but the one you’re hovering over. It will unfortunately also blur all the articles when you’re hovering on a gap between two.

    @import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap");
body {
  font-family: "Work sans", Arial, Monospace, sans-serif;
}

h3 {
  font-weight: 800;
  font-size: clamp(1.13rem, calc(0.86rem + 1.05vw), 1.65rem);
  margin-block: 1rem;
  color: #10cab7;
}

p {
  font-weight: 400;
  font-size: calc(1rem + 1px);
  color: #2c4755;
}

.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 4rem;
  gap: 2rem;
  cursor: pointer;
}

.articles>* {
  transition: all 0.5s ease;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 1.5px rgba(0, 0, 0, 0.306);
}

.articles>*:hover {
  box-shadow: 0px 2px 2px 3px rgba(0, 0, 0, 0.306);
  transform: scale(1.03);
}

.articles:hover > *:not(:hover) {
  filter: blur(1px);
}

.articles img {
  display: block;
  max-width: 100%;
  border-bottom: solid 3px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  -webkit-border-image: linear-gradient( to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  -moz-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  -ms-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  border-image-width: 0px 0px 4px auto;
}

.articles .article-desc {
  padding: 2rem;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
    <div class="articles bkg-gray">

  <div class="article-1">
    <img src="https://i.imgur.com/nzK9N7l.png" alt="services">

    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
    </div>
  </div>
  <div class="article-2">
    <img src="https://i.imgur.com/5EOzUIQ.png">

    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
    </div>
  </div>
  <div class="article-3">
    <img src="https://i.imgur.com/7cnLyBD.png" alt="services">
    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempor.</p>
    </div>

  </div>
</div>
    Login or Signup to reply.
  2. 0

    Using Douwe de Haan‘s answer and replacing padding with margin with the pointer-events applied correctly, it entirely works as wished.

    The pointer-events: none on the .articles (which is the container) disables the "hover" entirely, and the pointer-events: all on the .articles>* (children (the cards)) enables it, so the blurring will take effect only when you are hovering on the cards, not outside of them (all).

    @import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap");
body {
  font-family: "Work sans", Arial, Monospace, sans-serif;
}

h3 {
  font-weight: 800;
  font-size: clamp(1.13rem, calc(0.86rem + 1.05vw), 1.65rem);
  margin-block: 1rem;
  color: #10cab7;
}

p {
  font-weight: 400;
  font-size: calc(1rem + 1px);
  color: #2c4755;
}

.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 4rem;
  gap: 2rem;
  cursor: pointer;
  pointer-events: none;
}

.articles>* {
  transition: all 0.5s ease;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 1.5px rgba(0, 0, 0, 0.306);
  pointer-events: all;
}

.articles>*:hover {
  box-shadow: 0px 2px 2px 3px rgba(0, 0, 0, 0.306);
  transform: scale(1.03);
}

.articles:hover>*:not(:hover) {
  filter: blur(1px);
}

.articles img {
  display: block;
  max-width: 100%;
  border-bottom: solid 3px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  -webkit-border-image: linear-gradient( to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  -moz-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  -ms-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
  border-image-width: 0px 0px 4px auto;
}

.articles .article-desc {
  padding: 2rem;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
    <div class="articles bkg-gray">

  <div class="article-1">
    <img src="https://i.imgur.com/nzK9N7l.png" alt="services">

    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
    </div>
  </div>
  <div class="article-2">
    <img src="https://i.imgur.com/5EOzUIQ.png">

    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
    </div>
  </div>
  <div class="article-3">
    <img src="https://i.imgur.com/7cnLyBD.png" alt="services">
    <div class="article-desc">
      <h3>
        Graphic Design
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempor.</p>
    </div>

  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search