Menu
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:
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:
889
asked Sep 24 '26 23:09
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
