Directional Hover


              $outer-width: 9rem;
$primary: #ff5f1f;
$secondary: transparent;
@mixin centerContent(){
  display: flex;
  justify-content: center;
  align-items: center;
}

//set up the cells in a grid
//layout and sizes
.container{
  display: flex;
  flex-wrap: wrap;
  margin: 5rem;
  width: $outer-width;
  position: relative;
}
.cell{
  flex-basis: $outer-width/3;
  height: $outer-width/3;
  @include centerContent;
  font-family: Arial;
  font-size: 0.5rem;
  color: transparentize(black, 0.4);
  z-index: 1;
  cursor: default;
}
.targetContainer{
  z-index: 0;
}
.target{
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  @include centerContent;
  color: #333;
  font-size: 1.1rem;
  font-weight: bold;
  border: 1px solid #efefef;
}


//location
@for $i from 1 through 9 {
  @if ($i<5) {
    .cell:nth-child(#{$i}){
      order: $i;
    }
  }
  @if ($i>=5){
    .cell:nth-child(#{$i}){
      order: $i+1;
    }
  }
  @if ($i==9){
    .cell:nth-child(#{$i}){
      order: 4;
    }
  }
}
//manipulate bg gradient based on which cell is hovered
.cell{
  background-color: transparent;
  //setup gradient surrounding cells
  @for $i from 1 through 8{
    //use following sibling selector to targetContainer the cell and 'know' which direction to point the gradient.
    &.dir:nth-child(#{$i}):hover~&.targetContainer .target{
      @if ($i<4){
        background-image: linear-gradient(90deg + $i*45deg, $primary 0%, $secondary 70%);
      }
      //there should be a better way to targetContainer 4 and 5
      @if ($i==4){
        background-image: linear-gradient(90deg, $primary 0%, $secondary 70%);
      }
      @if ($i==5){
        background-image: linear-gradient(270deg, $primary 0%, $secondary 70%);
      }
      @if ($i>5 and $i<9){
        background-image: linear-gradient(90deg - ($i - 5)*45deg, $primary 0%, $secondary 70%);
      }
    }
  }
  .target:hover{
    background-image: radial-gradient(ellipse at center, $primary 0%, $secondary 110%);
  }
}

//hide direction numbers
label{font-family: Arial; color: #333;}
input#dirnum:checked ~ div.container .dir{color: transparent;}
            


!

Let's block ads! (Why?)

 

Propellerads
 

7 days ago

Leave a Reply