How to make an overlay invisible until hover?

Question

I'm trying to make my overlay invisible until I hover over a picture (<img>):

<div class="channel-picture">
  <img class="profile-picture" src="channel-pictures/channel-1.jpeg">

  <div class="channel-picture-overlay">
    <img class="channel-picture-overlay-image" src="channel-pictures/channel-1.jpeg">
    <p class="p1-overlay">
      Marques Brownlee
    </p>
    <p class="p2-overlay">
      15M Subscribers
    </p>
  </div>
  </div

I tried to use css; I want to make the overlay invisible until I hover over the channel-picture.

.channel-picture:hover {
    /* and here i want to add my overlay to appear */
}

`I tryed use in css` did you try opacity ? or what have you tried with CSS ? Please share your code — Mihai T, Nov 26 '22 at 11:16
how you want add little bit more detail, if possible output image — MAYUR SANCHETI, Nov 26 '22 at 11:46
once you the hover is removed, do you want overlay to be hidden again? — Neptotech -vishnu, Nov 26 '22 at 12:25
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Nov 27 '22 at 07:21

score 0 · Answer 1 · answered Nov 26 '22 at 14:17

The answer below is combination of this and this S.O answers

Here we use ~ operator to select your .channel-picture-overlay, when your .profile-picture is hovered(Change the selector element names in code if needed).
Get help over here to learn about usage of selector's operators.
We use transition along with a value 9^(9^9), which is highest value, with three digits,no computer has found yet! Get amazed here
We use opacity currently, just comment those lines and uncomment nearby lines, if you want to use display instead. Homework: difference between using opacity:0%, display:none!

.channel-picture-overlay{
    opacity:0%; /*display:none;*/
    transition: 0s calc((9*9*9*9*9*9*9*9*9)*1s);
}
.profile-picture:hover ~ .channel-picture-overlay{/*Change this selector if needed*/

    opacity:100%; /*display:block;*/
    transition: display 0s 0s; /*transition: display 0s 0s;*/
}

<div class="channel-picture">
  <img class="profile-picture" src="https://picsum.photos/seed/picsum/400/200">

  <div class="channel-picture-overlay">
    <img class="channel-picture-overlay-image" src="https://picsum.photos/seed/picsum/100/100">
    <p class="p1-overlay">
      Marques Brownlee
    </p>
    <p class="p2-overlay">
      15M Subscribers
    </p>
  </div>
  </div>

How to make an overlay invisible until hover?

1 Answers1