CSS grid hover animation

Ben Milne 0
Viewed 51

Wondering how anyone would suggest rebuilding this example into a more workable version, that could be used as an interactive section on the web.

Created this working example quickly using CSS.

HTML

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
  <div class="box e"></div>
  <div class="box f"></div>
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
  <div class="box e"></div>
  <div class="box f"></div>
</div>

CSS

.wrapper {
  overflow: hidden;
  width: 100vw;
  display: grid;
  grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
  grid-gap: 0px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #fff;
  color: #fff;
  border: 0.001em solid #efefef;
  border-radius: 0px;
  padding: 0px;
  height:1 7px;
  transition: all 1s ease-out;
  transition-delay: 0.2s;
}

.box:hover {
  background-color: #FF5400;
  border: 0.001em solid #FF5400;
  transition: all 0.1s ease-out;
}

.box.d:hover {
  background-color: #2BD1F8 !important;
  border: 0.001em solid #2BD1F8;
  transition: all 0.1s ease-out;
}
javascript css
2 Answers

You can do it like this, run a for loop that makes how many divs you want, and i see that on codepen, every nth element changes color, so i think this is more workable solution than the one on codepen.

let row = document.querySelector('.row');

for(let i = 0; i <= 50; i++){
   
    if(i % 5 === 0){
        row.innerHTML += `
            <div class="box-blue"></div>
        `
    }else{
        row.innerHTML += `
        <div class="box-orange"></div>
    `
    }
}
.box-orange{
    width: 50px;
    height: 50px;
    margin: 1rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.box-orange:hover{
    background: orange;
}
.box-blue{
    width: 50px;
    height: 50px;
    margin: 1rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

}
.box-blue:hover{
    
    background: blue;
}
<div class="container">
        <div class="row">
            
        </div>
   </div>

Jovan Jovanovic0

You can do quite a bit to simplify the code and at the same time make it more general.

This snippet removes the vendor prefixes on the CSS to make things a bit clearer, but of course put them back in if you are supporting old browsers.

The number of boxes that you want is set in JS. Then the snippet calculates the number per row and sets CSS variables in wrapper to pass the information to the styling.

It executes a for loop to create the divs.

There is no need to put classes into the boxes (unless you need them for some other reason). CSS can deal with having every 6th one colored pale blue, and the first of these at number 4 by using nth-child(6n-2).

More generality could easily be built in by setting the width of boxes to a variable and you could round the number to enable exactly a row to be filled etc.

const numBoxes = 300;// set this to the number of boxes you want

const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.style.setProperty('--numBoxes', numBoxes);
wrapper.style.setProperty('--numInRow', Math.floor(window.innerWidth / 20));
for (let i=0; i<numBoxes; i++) {
  const box = document.createElement('div');
  box.classList.add('box');
  wrapper.appendChild(box);
}
document.body.appendChild(wrapper);
.wrapper {
  overflow:hidden;
  width:100vw;
  display: grid;
  grid-template-columns: repeat(var(--numInRow), 20px);
  grid-gap: 0px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #FFF;
  color: #fff;
  border: 0.001em solid #efefef;
  height:17px;
  transition: all 1s ease-out;
  transition-delay:0.2s;
}

.box:hover {
  background-color: #FF5400;
  border: 0.001em solid #FF5400;
   transition: all 0.1s ease-out;
}

.box:nth-child(6n-2):hover {
  background-color:  #2BD1F8;
   border: 0.001em solid #2BD1F8;
}

The code for setting the variables and deleting/creating boxes would have to be set up to rerun if the viewport changes size.

A Haworth0
Related