image hover is not working when hovering on the next element or sibling

Question

I want to low down brightness of image when i hover on

. but it's not working. how can i achieve this.

HTML:

 <div class="artist-tile">
 <img class="art" src="Ed-Sheeran.jpg" alt="">
 <p class="link-artist">Ed Sheeran</p>
</div>

CSS:

 .link-artist:hover .art{
       filter: brightness(60%);
 }

Answer 1

What you are doing is not good approach but if you want so here is the snippet for you.

Thanks me later.

 .artist-tile { width: 300px; max-width: 100%; text-align: center; background: #f2f2f2; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column-reverse; align-items: center; }.link-artist { width: 100%; }.art { width: 100%; }.link-artist:hover ~.art{ filter: brightness(60%); }

 <div class="artist-tile"> <p class="link-artist">Ed Sheeran</p> <img class="art" src="https://preview.ibb.co/cyESoU/img1.jpg" alt="" > </div>

Answer 2

From what I understand, you only want the :hover effect when <p> is hovered, not when the image (or the parent) are.

CSS selectors don't work backwards. This means a change in the state of the current target cannot affect what rules apply to previous siblings or to parents.

However, you can change what rules apply to subsequent siblings (and to children, obviously). Which means you could swap the order of the elements in DOM, so that the :hover -ed one is actually first and then use flexbox to swap their rendering order, to make it look like it's second. But in DOM, it needs to be first in order for this to work:

 .link-artist:hover+.art { filter: brightness(60%); }.artist-tile { display: inline-flex; flex-direction: column; }.artist-tile.art { order: -1; }

 <div class="artist-tile"> <p class="link-artist">Ed Sheeran</p> <img class="art" src="https://via.placeholder.com/150" alt=""> </div>

Answer 3

<p class="link-artist">Ed Sheeran</p>

There is no.art element in the paragraph

Answer 4

Try like this.

 .artist-tile:hover.art{ filter: brightness(60%); }

 <div class="artist-tile"> <img class="art" src="https://www.w3schools.com/howto/img_nature_wide.jpg" alt=""> <p class="link-artist">Ed Sheeran</p> </div>

Answer 5

Your CSS is currently looking for a descendent of.link-artist. The <img /> would need to be a child of your current <p> for that to work.

To do what you want, you need to use the sibling selector:

 .link-artist:hover ~ .art{
       filter: brightness(60%);
 }

Edit: for this to work you would need to switch the order of the <img/> and <p> in the HTML as siblings selection only works on following siblings. There is no previous sibling selector. Mohd Salman's answer already contains a nice exmaple of the restructure required, so I won't repeat here. I'll leave the answer up as it explains the why to Mohd's how .