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.
