0

I have a little issue, and it's probably nothing but I'm struggling with it. For my portfolio, I used the mix-it-up plugin. Now I'm trying to add this simple effect where some text appears when hovering the thumbnail. The problem is that the text gets the same opacity as my overlayer, which is not the point because it gets unreadable. I know it's probable something supid, but I can't figure out what it is. Thanks in advance for your help!

here is the html:

  <div id="Container">
    <div class="mix illu">
      <img src="" alt="">
      <div class="text-hover">
        <h3>Title</h3>
        <p>Some text</p>
      </div>
    </div>
  </div>

and my SASS

        .mix { 
          position: relative;
          text-align: center;
          transition: width 2s;
            h3 {
              color: grey;
              font-size: 26px;
            }
            .text-hover {
              position: absolute;
              width: 100%;
              top: 70%;
              left: 0;
              transition: width 2s;
              opacity: 0;
              z-index: 500;
            }
           .text-hover:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100px;
              background-color: white;
              content: '';
              opacity: 0.5;
              z-index: 1;
           }
        }

   .mix:hover {
          .text-hover{
            opacity: 1;
            top: 60%;
            bottom: 0;
          }
    }
TiphG
  • 33
  • 5
  • Normally you want the `.mix` div to have 0.5 opacity and `.text-hover` to have full opacity? – Mohit Bhardwaj Jul 04 '16 at 16:57
  • no, sadly it's not the same problem ... thanks anyway :-) – TiphG Jul 04 '16 at 17:10
  • does the following fiddle help? ... https://fiddle.jshell.net/Berdesdan/mw9jrf2y/1/ – Berdesdan Jul 04 '16 at 17:45
  • This is the idea but the text still has the same opacity than its backgroud pseudo element – TiphG Jul 04 '16 at 18:07
  • 1
    Why do you think it has a lower opacity? The opacity is 1 as you can see in the inspector. It's just that this semitransparent rectangle is in front of it. Did you want the semitransparent rectangle actually to appear behind it, maybe? – Mr Lister Jul 04 '16 at 18:29
  • @MrLister has got to the root of your problem. Try this: https://fiddle.jshell.net/Berdesdan/mw9jrf2y/2/ – Berdesdan Jul 04 '16 at 18:37
  • indeed, thank you all for your trouble! :-) – TiphG Jul 04 '16 at 19:49

0 Answers0