CODEWITHSUNDEEP
css
lvdesign
lvdesign

Reputation: 33

how to make apply multiple elements on hover css

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:

  1. blur
  2. 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: trying to make the image blur and text appear enter image description here

Upvotes: 3

Views: 144

Answers (1)

TechySharnav
TechySharnav

Reputation: 5084

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>

Upvotes: 2

Related Questions