pointer-events siblings effect

In this example below you will see how to do a pointer-events siblings effect with some HTML / CSS and Javascript

Simulating siblings transformation when :hover one child element, the tricky is the "pointer-events: none" in the parent element. No JS needed.

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>pointer-events siblings effect</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="AccountsGrid"></div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/pointer-events-siblings-effect-MejXQL */
*, *::after, *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  line-height: 25px;
}

.AccountsGrid {
  align-content: center;
  border: 20px solid purple;
  display: flex;
  flex-flow: row wrap;
  min-height: 100vh;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
}

.AccountsGrid:hover .Accounts {
  opacity: 0.6;
  transform: scale(0.6);
}

.Tiles:hover .Accounts {
  opacity: 1;
  transform: scale(1);
}

.Tiles {
  flex: 1 0 auto;
  pointer-events: all;
}

.Accounts {
  cursor: pointer;
  border: 1px solid transparent;
  height: 136px;
  overflow: hidden;
  padding: 10px;
  text-align: center;
  transform-style: linear;
  transition-duration: 175ms;
  width: 128px;
}

.Accounts-image {
  background-color: red;
  margin-left: auto;
  margin-right: auto;
  height: 64px;
  width: 64px;
}

.Accounts-name,
.Accounts-value {
  display: block;
  font-size: 16px;
  line-height: 25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*Downloaded from https://www.codeseek.co/oieduardorabelo/pointer-events-siblings-effect-MejXQL */
var template = '\n<div class="Tiles">\n  <article class="Accounts">\n    <figure class="Accounts-image"></figure>\n    <p class="Accounts-name">Account name</p>\n    <b class="Accounts-value">$ 1.200.000</b>\n  </article>\n</div>\n';

var items = Array(45).fill(0).map(function (item) {
  return '' + template;
}).join('');

document.querySelector('.AccountsGrid').innerHTML = items;

Comments