-1

img:hover /*What should I put here ?*/{
    filter: contrast(0.7) blur(1px) grayscale(0);
}
<figure>
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Mathematics.jpg" alt="Mathématiques">
  <p class="pimg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  <figcaption>Maths</figcaption>
</figure>

I have a picture and then a paragraph. If I touch the paragrapg (p:hover), I want the image (before the paragraph) to change any of its proprieties. How can I do that ? (Sorry for my bad english.)

If you want to know what I tried, I wanted to put two pseudo-classes (:hover and :nth-child) but it doesn't work.

Just1.0
  • 1
  • 2
  • Yes, we want to know what you tried - but we rather want to _see it_, than to only get an overly vague verbal explanation. So please show a [mre] of what you tried, when asking questions like this. – CBroe Aug 15 '23 at 10:36
  • Unless the whole thing can be made to use `:hover` on a wrapper element, you will probably have to use `:has()` then (which currently does not have support in Firefox though, unless explicitly enabled by the user.) – CBroe Aug 15 '23 at 10:37
  • @CBroe I updated – Just1.0 Aug 15 '23 at 10:41
  • @CBroe Ok I'll try with the "figure" element – Just1.0 Aug 15 '23 at 10:42
  • @CBroe It worked with the "figure element", thank you very much !! – Just1.0 Aug 15 '23 at 10:43

0 Answers0