Direction Aware Hover Effect in Bricks Builder

Amanda Lucas
on
December 22, 2022

A CSS only direction aware hover effect on a grid of images.

I discovered this effect in a Themeforest template called Zebre many years ago and had it bookmarked.

It’s not until now, I had the know how to break it down and replicate this effect in Bricks including some ACSS variables.

It was originally found on this website but I have modified things a little. It’s not 100% perfect so I plan to update this post with improvements.

It is still using code to output the images but I also plan to do a version using the GUI of Bricks.

Below is a screenshot of it in action and here is the link to the demo page.

Add the following HMTL to a code block in Bricks, with your own image urls and hover descriptions.

<body>
  <ul class="grid">
     <li>
      <a href="#">
        <img src="https://bricks.itchyfingersdesign.com/wp-content/uploads/2021/03/alexander-andrews-458492-unsplash-scaled.jpg" alt="">
        <span class="description">First Image</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://bricks.itchyfingersdesign.com/wp-content/uploads/2021/03/rawpixel-617395-unsplash.jpg" alt="">
      </a>
      <span class="description">Second Image</span>
    </li>
    <li>
      <a href="#">
        <img src="https://bricks.itchyfingersdesign.com/wp-content/uploads/2021/03/3b0a17c5-8a02-36fd-9b6a-ba061d2c01fc-1024x682.jpg" alt="">
        <span class="description">Third Image</span>
      </a>      
    </li>
    <li>
     <a href="#">
        <img src="https://bricks.itchyfingersdesign.com/wp-content/uploads/2021/09/bench-accounting-49023-unsplash-1024x682.jpg" alt="">
        <span class="description">Fourth Image</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://bricks.itchyfingersdesign.com/wp-content/uploads/2021/09/bench-accounting-49023-unsplash-1024x682.jpg" alt="">
        <span class="description">Fifth Image</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://bricks.itchyfingersdesign.com/wp-content/uploads/2021/03/sarah-dorweiler-357717-unsplash-1024x683.jpg" alt="">
        <span class="description">Sixth Image</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://bricks.itchyfingersdesign.com/wp-content/uploads/2021/03/sarah-dorweiler-357717-unsplash-1024x683.jpg" alt="">
        <span class="description">Seventh Image</span>
      </a>
    </li>    
    <li>
      <a href="#">
        <img src="https://bricks.itchyfingersdesign.com/wp-content/uploads/2021/09/Mac-on-desk-scaled.jpg" alt="">
        <span class="description">Eighth Image</span>
      </a>
    </li>
</ul>
  
</body>

Add the following CSS to WPCodebox or wherever you add custom CSS.

/* Code By Webdevtrick ( https://webdevtrick.com ) - Modified by Amanda Lucas*/
:root {
  --offset: 0rem;
}

*, *:before, *:after {
  box-sizing: border-box;
}


@media (min-width: 40em) {
  body {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
}

img,
a {
  display: block;
  height: 100%;
  cursor: default;
}

img {
  max-width: 100%;
  width: 100%;
  object-fit: cover;
}

.grid {
  display: grid;
  grid-gap: 0;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100vh;
}
.grid li {
  position: relative;
}
.grid li:hover ~ li:last-child:after,
.grid li:last-child:hover:after,
.grid li:hover ~ li:last-child:before,
.grid li:last-child:hover:before {
  opacity: 1;
  transition: .6s ease;
}
.grid li:last-child:after,
.grid li:last-child:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  clip-path: polygon(var(--offset) var(--offset), var(--offset) calc(100% - var(--offset)), calc(100% - var(--offset)) calc(100% - var(--offset)), calc(100% - var(--offset)) var(--offset));
  -webkit-clip-path: polygon(var(--offset) var(--offset), var(--offset) calc(100% - var(--offset)), calc(100% - var(--offset)) calc(100% - var(--offset)), calc(100% - var(--offset)) var(--offset));
  opacity: 0;
  transition: opacity 1s, transform 1s 1s, background 1s;
}


.grid li:last-child:after {
  mix-blend-mode: normal;
/* change hover colour as needed */
  background: var(--primary-trans-80);
} 
.grid li:last-child:before {
  backdrop-filter: grayscale(100%) blur(2px);
  -webkit-backdrop-filter: grayscale(100%) blur(2px); 
} 
.grid li:hover ~ li:last-child:after {
/* change hover colour as needed */
  background: var(--primary-trans-80);
  
}

.grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 33.3333333333%);
}
.grid li:last-child:after,
.grid li:last-child:before {
  left: 100%;
  transform: translate3d(-100%, -100%, 0);
}
.grid li:nth-child(1):hover ~ li:last-child:after,
.grid li:nth-child(1):hover ~ li:last-child:before {
  transform: translate3d(-200%, -200%, 0);
}
.grid li:nth-child(2):hover ~ li:last-child:after,
.grid li:nth-child(2):hover ~ li:last-child:before {
  transform: translate3d(-100%, -200%, 0);
}
.grid li:nth-child(3):hover ~ li:last-child:after,
.grid li:nth-child(3):hover ~ li:last-child:before {
  transform: translate3d(0%, -200%, 0);
}
.grid li:nth-child(4):hover ~ li:last-child:after,
.grid li:nth-child(4):hover ~ li:last-child:before {
  transform: translate3d(-200%, -100%, 0);
}
.grid li:nth-child(5):hover ~ li:last-child:after,
.grid li:nth-child(5):hover ~ li:last-child:before {
  transform: translate3d(-100%, -100%, 0);
}
.grid li:nth-child(6):hover ~ li:last-child:after,
.grid li:nth-child(6):hover ~ li:last-child:before {
  transform: translate3d(0%, -100%, 0);
}
.grid li:nth-child(7):hover ~ li:last-child:after,
.grid li:nth-child(7):hover ~ li:last-child:before {
  transform: translate3d(-200%, 0%, 0);
}
.grid li:last-child:hover:after,
.grid li:last-child:hover:before {
  transform: translate3d(-100%, 0%, 0);
}

@media (max-width: 60em) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 25%);
  }
  .grid li:last-child:after,
  .grid li:last-child:before {
    left: 0%;
    transform: translate3d(-50%, -150%, 0);
  }
  .grid li:nth-child(1):hover ~ li:last-child:after,
  .grid li:nth-child(1):hover ~ li:last-child:before {
    transform: translate3d(-100%, -300%, 0);
  }
  .grid li:nth-child(2):hover ~ li:last-child:after,
  .grid li:nth-child(2):hover ~ li:last-child:before {
    transform: translate3d(0%, -300%, 0);
  }
  .grid li:nth-child(3):hover ~ li:last-child:after,
  .grid li:nth-child(3):hover ~ li:last-child:before {
    transform: translate3d(-100%, -200%, 0);
  }
  .grid li:nth-child(4):hover ~ li:last-child:after,
  .grid li:nth-child(4):hover ~ li:last-child:before {
    transform: translate3d(0%, -200%, 0);
  }
  .grid li:nth-child(5):hover ~ li:last-child:after,
  .grid li:nth-child(5):hover ~ li:last-child:before {
    transform: translate3d(-100%, -100%, 0);
  }
  .grid li:nth-child(6):hover ~ li:last-child:after,
  .grid li:nth-child(6):hover ~ li:last-child:before {
    transform: translate3d(0%, -100%, 0);
  }
  .grid li:nth-child(7):hover ~ li:last-child:after,
  .grid li:nth-child(7):hover ~ li:last-child:before {
    transform: translate3d(-100%, 0%, 0);
  }
  .grid li:last-child:hover:after,
  .grid li:last-child:hover:before {
    transform: translate3d(0%, 0%, 0);
  }

  :root {
    --offset: 0;
  }
}
.description {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
  position: absolute;
  display: block;
  right: .2em;
  left: .2em;
  text-align: center;
  top: 50%;
  width: 100%;
  margin: auto;
  color: var(--shade-black);
  z-index: 100;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  transition: .3s 0s;
  
}


li:hover .description {
  opacity: 1;
  transition: .5s .3s;
   
}

I hope you find this useful and if there is a better way to do this, please share your thoughts in the comments. I will also be exploring ways to make it accessible and semantically correct.

Leave the first comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Amanda Lucas

Amanda Lucas

Amanda Lucas runs a web design agency in Ireland called Itchy Fingers Design. She enjoys creating websites that help support business goals and growth and sharing her knowledge.