CSS Effects, Hover over a div Container and all the other div Containers lower the opacity

user_11921580 0
Viewed 694

I am working on a Website where I created 5 different Blocks with a div container. Now I added a CSS effect which makes the div container pop up if you hover over it. 


.site-block {
    position: relative;
    width: 18%;
    height: 345px;
    background-color: #23253b;
    margin: 8px;
    border-radius: 12px;
    top: 0;
    transition: 0.5s;
}
.site-block:hover {
    transform: scale(1.06);
}

HTML for 1 Block

    <div class="site-block">
                    <div class="site-logo">
                        <img src="img/sites/csgoempire-logo.png"/>
                    </div>
                    <div class="bonus">
                        <p>Get a free case!</p>
                    </div>
                    <br>
                    <div class="deposit-methods">
                        <img src="img/deposit-methods/btc-deposit.png" alt="G2A" />
                        <img src="img/deposit-methods/eth-deposit.png" alt="CSGO" />
                    </div>
                    <div class="code">
                        <a>Primatcodes</a>
                        <img src="img/copy.png" alt="CSGO" />
                    </div>
                    <div class="site-url">
                        <a href="https://daddyskins.com/promo-code/Primatcodes">Claim
                        </a>
                    </div>
                </div>

Now I want to add another effect which should blur out all the other blocks. So bassicaly if I hover over a block I want that block to pop out and have a opacity of 1 and the other 4 should lower their opacity to 0.2. Is that possible with CSS or Javascript? and if yes HOW

Looking forward to your answers!

effects hover css html javascript
1 Answers

Not sure if there is a CSS way, but here is a javascript native way using mouseenter and mouseleave events:

.container {
display:flex;
}

.site-block {
  position: relative;
  width: 18%;
  height: 200px;
  background-color: #23253b;
  margin: 8px;
  border-radius: 12px;
  top: 0;
  transition: 0.5s;
  color: #FFF;
}


.site-block:hover {
  transform: scale(1.06);
}
<div class="container">
  <div class="site-block">
   <p>AAA</p>
  </div>
  <div class="site-block"><p>AAA</p></div>
  <div class="site-block"><p>AAA</p></div>
  <div class="site-block"><p>AAA</p></div>
</div>
<!-- first try it like this, then move it to file, just make sure  your HTML above js tag ☝️and its before </body> -->
<script>
const siteBox = document.querySelectorAll('.site-block');

siteBox.forEach(function(element){
  element.addEventListener('mouseenter', function(event) {

    siteBox.forEach((box) => {
      if(event.target !== box) {
        //box.style.opacity = 0.2;
        box.style.backgroundColor = 'rgba(35, 37, 59, 0.2)';
        box.style.color = '#000';
      }
    });
    event.target.opacity = 1;
  });
  
  element.addEventListener('mouseleave', function(event) {
    siteBox.forEach((otherBox) => {
      otherBox.style.backgroundColor = 'rgb(35, 37, 59)';
      otherBox.style.color = '#FFF';
    });
  });
});
</script>

user_8963580
Related