Can I hide text in container until user hover over it? If yes how?

Question

I've made a container and there is text and a background image in the container. The text is in h3 tags. I want the text to stay hidden showing only image. When user hover over the container I want to display the text and background image has to little transparent. How can I do that?? this is my CSS code so far... I have also attached the image I'm usingImage I'm using for this code

.container{
    
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 100px;
    padding: 18px 40px;
    font-size: 22px;
    text-align: center;
    width: 250px;
    height: 250px;
    border-radius: 35px;
    
    color: transparent;
    line-height: 200px;
    float: left;
    margin-left: 20%;
    background-image: url(/Unstitched.jpeg.jpg);
}
.container:hover{
    background: rgba(255,0,0,0.3) ;
    color: black
}

Jeanot Zubler · Accepted Answer · 2022-11-16T17:12:26.880

You can probably do something like this:

.container {
  margin-top: 100px;
  padding: 18px 40px;
  font-size: 22px;
  text-align: center;
  width: 250px;
  height: 250px;
  border-radius: 35px;
  color: black;
  line-height: 200px;
  float: left;
  margin-left: 20%;
  position: relative;
}

.container::before{
  z-index: -1;
  content: '';
  position: absolute;
  inset: 0;
  margin: inherit;
  border-radius: inherit;
  background-image: url(https://i.stack.imgur.com/MLu3i.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.container:hover::before {
  opacity: 0.2;
}

.container h3 {
  display: none;
}

.container:hover h3 {
  display: block;
}

<div class="container">
  <h3>My invisible Text</h3>
</div>

The relevant changes are these:

.container h3 {
    display: none;
}

.container:hover h3 {
    display: block
}

This makes the h3 tag invisible, until someone hovers over the container element.

Edit: From a comment on another answer I realized, that you want the image to become transparent on hover. To acheive that, you have to add the image to a separate element, otherwise the Text will be transparent too. To acheive this, I used a ::before element. Source

Diego D · Answer 2 · 2022-11-16T13:49:24.773

Slightly changed your css rules but mostly I used the opacity css property on the :hover to change its transparency when hovered. I also picked the first cors friendly picture from the internet to have a real picture to deal with in the background.

The behaviour is as you are expecting: the text is not displayed until the container element is hovered and at that point the opacity is set dimmer. The drawback is dimming the overall opacity including children elements and not only the background. To make it better it would require something like a ::before rule to add a styled element inside the container holding the background whose opacity will be uncoupled from the rest of the content.

.container{    
    background-size: cover;
    background-repeat: no-repeat;    
    background-image: url(https://thumbs.dreamstime.com/z/cors-caron-boardwalk-across-bog-near-tregaron-wales-62354242.jpg);
    
    font-size: 22px;
    text-align: center;
    width: 250px;
    height: 250px;
    border-radius: 35px;    
    color: transparent;
}
.container:hover{    
    color: black;
    opacity: 0.6;
}

<div class="container">
   <h3>Caption text</h3>
</div>

This is good technique but the only problem here is that the opacity also apply on text. Is there other method to use so that opacity don't affect text opacity?? like text must've opacity 1. — Zoha Javed, Nov 16 '22 at 15:25

Can I hide text in container until user hover over it? If yes how?

2 Answers2