how to make apply multiple elements on hover css

Question

This is my first time posting sorry in advance, this is my first time trying to make a website for uni. Im trying to make 2 things happen to my image on hover, I want it to:

blur
make text appear

Ive managed to make it blur but cant seem to make any text appear on top of the blur.

CSS:

'''.container {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  justify-content: space-evenly;
}

.fern {
 max-width: 50vw;
 max-height: 100vh;

}

img {
  max-width:100%;
  max-height: 80vh;

}
.venus {
max-width: 50vw;
}
.venus:hover {
  -webkit-filter:blur(10px);
  transition: .5s ease;
  cursor: pointer;

}

.fern:hover {
  -webkit-filter:blur(10px);
  transition: .5s ease;
  cursor: pointer;
}

    '''

HTML:

<body>

<h1 class="guide">
  a guide to wellness and growth
</h1>

<div class="container">
  <div class="fern">
    <img src="./assets/images/fern_nobg.png" alt="fern_nobg">
  </div>

  <div class="venus">
    <img src="./assets/images/venus_nobg.png" alt="venus_nobg">
    </div>
</div>

</div>

</body>

I have tried this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_display_element_hover and https://www.youtube.com/watch?v=W0ubfqwd4G4 and neither of them worked.

This is what im trying to make:

What text, are you talking about the H1? That is not possible with this kind of structure - [there is no “parent selector” in CSS](https://stackoverflow.com/q/1014861/1427878), CSS can only select “downwards” and “to the right”, so the only elements you will be able to manipulate on hover of .fern and .venus, will be those elements themselves, their descendant elements, and following siblings. — CBroe, Jun 03 '21 at 06:23
ive added pictures of what im trying to make if that makes it clearer!, so from what i understand i cant add a second effect to when i hover? — lvdesign, Jun 03 '21 at 06:47

TechySharnav · Accepted Answer · 2021-06-03T07:25:44.607

You can apply filter to img instead of applying to entire div. I have added text in span elements, and set display: none; as default. On hover, you could change it to display: block;.
If you want to animate it as well, you can use opacity.

.container {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  justify-content: space-evenly;
}

.fern {
  max-width: 50vw;
  max-height: 100vh;
}

img {
  max-width: 100%;
  max-height: 80vh;
  transition: .5s ease;
}

.venus {
  max-width: 50vw;
  transition: .5s ease;
}

.text{
  display: none;
}

.venus:hover img {
  -webkit-filter: blur(10px);
  cursor: pointer;
}

.fern:hover img {
  -webkit-filter: blur(10px);
  transition: .5s ease;
  cursor: pointer;
}

.fern:hover .text, .venus:hover .text{
  display: block;
}

<body>

  <h1 class="guide">
    a guide to wellness and growth
  </h1>

  <div class="container">
    <div class="fern">
      <img src="https://www.pngjoy.com/pngm/48/1094382_ferns-ostrich-fern-transparent-png.png" alt="fern_nobg">
      <span class="text">Fern</span>
    </div>

    <div class="venus">
      <img src="https://assets.stickpng.com/images/580b585b2edbce24c47b2712.png" alt="venus_nobg">
      <span class="text">Venus</span>
    </div>
  </div>

</body>

how to make apply multiple elements on hover css

1 Answers1