How do I show some text and hide an image with hover, with pure CSS?

Question

When hovering over a side-info-panel (.popup-hover-section), I want the info-img to hide(.popup-hover-div p), and at the same time show the text in .show-span.

<section class="popup-hover-section">
                    <div class="popup-hover-div"><p></p><span class="show-span">Hidden text, but only until I am hovered over, and the whole section is shown! And my brother paragraph is hidden! :)</span></div>
</section>

.popup-hover-section {
        height: 30%;
        width: 65px;
        position: absolute;
        right: 0%;
        top: 30%;
        background-color: #111;
        color: #eee;
        border-radius: 40px 0 0 40px;
        transition: width 1s;
        transition-property: border-radius, width;
        box-shadow: 7px 7px 3px 0px rgba(0,0,0,0.75);
        z-index: 20;
    }
    
    .popup-hover-div p {
        padding: 32px 32px 32px 32px;
        display: flex;
        align-self: center;
        background: url(images/information.png) no-repeat;
        background-size: 100%;
        opacity: 0.5;
    }
    
    .show-span {
        /*I want to show the text inside this one, and when I do, the p-img should not show anymore*/
    }
    
    .popup-hover-div p:hover {
        opacity: 1;
    }
    
    .popup-hover-section:hover {
        background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
        transition-duration: 1.3s;
        border-radius: 0 0 0 0;
        transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
        width: 400px;
    }
    ```

score 2 · Accepted Answer · answered Nov 16 '20 at 18:58

The trick is to catch the hover over the container (.popup-hover-section) and then continue the selector from there to style the elements within.

.popup-hover-div:hover .show-span{ //styles }

.popup-hover-div:hover p img{ //styles }

I trust you can tweak it from here, but if you need further assistance give a shout.

.popup-hover-section {
  height: 30%;
  width: 65%;
  position: absolute;
  right: 1%;
  top: 30%;
  background-color: #111;
  color: #eee;
  border-radius: 40px 0 0 40px;
  transition: width 1s;
  transition-property: border-radius, width;
  box-shadow: 7px 7px 3px 0px rgba(0, 0, 0, 0.75);
  z-index: 20;
}

.popup-hover-div p {
  padding-left: 35px;
}

.show-span {
  /*I want to show the text inside this one, and when I do, the p-img should not show anymore*/
  color: transparent;
}
.popup-hover-div:hover .show-span{
  color: lightblue;
}

.popup-hover-div:hover p img{
  opacity: 0;
}
p, span{
  position:absolute;
  top:0;
  left:0;
  z-index: 1;
}
span{
  top:30px;
  left: 30px;
  z-index: 2;
}

<section class="popup-hover-section">
  <div class="popup-hover-div">
    <p><img src="https://placekitten.com/380/100" /></p>
    <span class="show-span">Hidden text, but only until I am hovered over, and the whole section is shown! And my brother paragraph is hidden! :)</span></div>
</section>

JithinAji · Answer 2 · 2020-11-16T19:15:49.360

1

Hellooo

.show-span {
  opacity: 0;
}

.popup-hover-section:hover .show-span {
  /*I want to show the text inside this one, and when I do, the p-img should not show anymore*/
  opacity: 1;
  transition-delay: 1.3s;
}

I think this is the one you are looking for. Please let me know if this works.

edited Nov 16 '20 at 19:15

answered Nov 16 '20 at 18:59

JithinAji

402
5
16

Yes, thanks. This worked well! (not sure how to post like code on a comments comment, using `code` as it says.) `.popup-hover-div:hover p { opacity: 0; transition-duration: 500ms; } .popup-hover-div:hover .show-span { opacity: 1; transition-duration: 2s; } .show-span { opacity: 0; padding: 40px; font-family: 'IM Fell French'; display: flex; justify-content: center; align-items: center; font-size: 20px; width: 400px; }` – runEngine Nov 16 '20 at 20:39

How do I show some text and hide an image with hover, with pure CSS?

2 Answers2