How do you keep the internal elements visible at the buckle with transparency?



  • How can the idling of the element and its obscuring with the effect of transparency make certain internal elements (both buttons) visible from the original lack of transparency?

    button {
      display: block;
      background-color: blue;
      color: #fff;
      padding: 10px;
    }
    .on-hover {
      display: none;
      position: absolute;
      top: 50%;
      left: 10%;
    }
    .frame {
      position: relative;
    }
    .frame:hover {
      opacity: 0.3;
    }
    .frame:hover .on-hover {
      display: block;
      background-color: black;
    }
    <div class="frame">
      <p>текст</p>
      <img src="http://s00.yaplakal.com/pics/pics_original/9/3/8/462839.jpg" alt="веселый паровозик" width="200" height="200" />
      <button>кнопка</button>
      <button class="on-hover">выход</button>
    </div>



  • Don't do it. .frame:hover {opacity: 0.3}.frame:hover * {opacity: 0.3;}

    After which, for exceptions, opacity: 1;

    https://jsfiddle.net/mh4vqk1c/

    button {
      display: block;
      background-color: blue;
      color: #fff;
      padding: 10px;
    }
    .on-hover {
      display: none;
      position: absolute;
      top: 50%;
      left: 10%;
    }
    .frame {
      position: relative;
    }
    .frame:hover * {
      opacity: 0.3;
    }
    .frame:hover .on-hover {
      display: block;
      background-color: black;
      opacity: 1;
    }
    <div class="frame">
      <p>текст</p>
      <img src="http://s00.yaplakal.com/pics/pics_original/9/3/8/462839.jpg" alt="веселый паровозик" width="200" height="200" />
      <button>кнопка</button>
      <button class="on-hover">выход</button>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2