Opacity demo

In this example below you will see how to do a Opacity demo with some HTML / CSS and Javascript

Hovering on div with opacity causes child elements to inherit the opacity. Hence the solution is to not give opacity to the parent element. Here the opacity is given to a different element.

Thumbnail
This awesome code was written by -HAN-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -HAN- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Opacity demo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel">
  <div class="pane">
    <div class="paneBox">Hi</div>
    <div class="submenu">
      this is the submenu
    </div>
  </div>
<div class="pane">
    <div class="paneBox">Hi</div>
    <div class="submenu">
      this is the submenu
    </div>
  </div>
  <div class="pane">
    <div class="paneBox">Hi</div>
    <div class="submenu">
      this is the submenu
    </div>
  </div>
  <div class="pane">
    <div class="paneBox">Hi</div>
    <div class="submenu">
      this is the submenu
    </div>
  </div>
  <div class="pane">
    <div class="paneBox">Hi</div>
    <div class="submenu">
      this is the submenu
    </div>
  </div>
  <div class="pane">
    <div class="paneBox">Hi</div>
    <div class="submenu">
      this is the submenu
    </div>
  </div>
  <div class="pane">
    <div class="paneBox">Hi</div>
    <div class="submenu">
      this is the submenu
    </div>
  </div>
  <div class="pane">
    <div class="paneBox">Hi</div>
    <div class="submenu">
      this is the submenu
    </div>
  </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-HAN-/opacity-demo-zgDvI */
.panel
{
  height:800px;
}
.pane 
{
  margin:10px;
  float:left;
  position:relative;
}
.paneBox
{
  width:300px;
  height:200px;
  background-color:#1E3C56;
  transition:opacity 0.3s;
}
.submenu
{
  position:absolute;
  width:100%;
  height:100px;
  background-color:#C23A2C;
  top:200px;
  z-index:10;
  display:none;
  opacity:1;
}
.pane:hover .submenu
{
  display:block;
}
.opa
{
  opacity:0.3;
}

/*Downloaded from https://www.codeseek.co/-HAN-/opacity-demo-zgDvI */
$(function()
 {
  $( ".pane" )
  .mouseenter(
    function()
    {
      var thisPane = $('.paneBox',this);
      $('.paneBox').not(thisPane).addClass('opa');
    }).mouseleave(
    function() 
    {
      $('.paneBox').removeClass('opa');
    });
  
})

Comments