On Turkey day, I was on Designer News and came across this post by Michael Weaver that shows a really clever use of the :on-hover pseudo-selector and the (~) general sibling selector to create a mouseover zoom effect that follows your mouse cursor—similar to the effect that Amazon uses for its product photos—all without the use of JavaScript.

I wondered if it was possible to use SCSS and Jade's for loops to pull this off using a variable grid, instead of having to hardcode everything.

With a bit of work, I was able to put the following together. Note that the color overlays are just to show where the grid items are.

See the Pen No-JS On-Hover Image Zoom by Daniel Cortes (@dgca) on CodePen.

So what's different about this approach than the original inspiration? Using Jade and SCSS, this approach lets us change the grid size by changing just two numbers—a variable in the Jade markup, and a variable in the SCSS markup.

The Jade is simple enough, using a single variable which we multiply by itself to generate the right number div.grid-item which act as the controls which shift the image around when it is zoomed. So in this example, our gridRoot variable is 5, so we get a 5x5 grid.

1div.grid-wrapper
2
3- var gridRoot = 5;
4- for (i = 0; i < gridRoot \* gridRoot; i++)
5  div.grid-item
6  img.zoom-image(alt='placeholder image' src='http://www.fillmurray.com/g/400/400')
7

And here's the workhorse of this project, the SCSS. Note that it also has a $grid-root variable. This needs to match the Jade's gridRoot variable in order for everything to work. We also set the size of the container and the on-hover zoom factor in the first three lines. Other than these three variable, the rest of the code can be left alone, as these three variables control the logic for how the rest of the code is generated.

For readability purposes, I'm just going to explain the rest of what's going on via code comments.

1$container-size: 400px;
2$grid-root: 5;
3$zoom-factor: 1.5;
4// The above variables control all the output logic!
5
6// $zoom-size is the size of the image once it's
7// zoomed in.
8// $offset is the amount of the image that hangs off
9// the wrapper div once it's zoomed in.
10// $stepper-count lets us pen the whole image if the
11// grid is an odd number of units across.
12// $stepper is the number of pixels we need to shift
13// the image as we move from grid item to grid item.
14$zoom-size: $container-size \* $zoom-factor;
15$offset: $zoom-size - $container-size;
16$stepper-count: $grid-root;
17@if $grid-root % 2 == 1 {
18  $stepper-count: $grid-root - 1;
19}
20$stepper: $offset / $stepper-count;
21
22// Here's the main wrapper. Flexbox FTW.
23.grid-wrapper {
24  display: flex;
25  flex-wrap: wrap;
26  height: $container-size;
27  overflow: hidden;
28  position: relative;
29  width: $container-size;
30}
31
32// Here are the individual grid items—each sized
33// according to the size of the grid.
34.grid-item {
35  height: 100% / $grid-root;
36  width: 100% / $grid-root;
37
38  // SCSS has a neat percentage() function which
39  // takes our 1.5 and turns it into 150%
40  &:hover ~ img {
41    height: percentage($zoom-factor);
42    width: percentage($zoom-factor);
43  }
44
45  // This loop iterates through the size of the grid
46  // and offsets the left and top positions accordingly
47  @for $i from 1 through $grid-root {
48    // Because SCSS thinks the stuff between the () is
49    // a string, you have to interpolate variables using #{}
50    &:hover:nth-of-type(#{$grid-root}n + #{$i}) ~ img {
51      left: (($i - 1) * $stepper) \* -1;
52    }
53
54    // Here we create a variable to get the math right for
55    // how we shift the image when moving vertically
56    $t: (($i - 1) * $grid-root) + 1;
57
58    &:hover:nth-of-type(1n + #{$t}) ~ .zoom-image {
59      top: (($i - 1) * $stepper) * -1;
60    }
61  }
62}
63
64// Base styles for the image element. Note the z-index
65// of value -1. Without this, our image would be on
66// top of our grid, and we wouldn't be able to hover
67// on our grid items!
68.zoom-image {
69  height: 100%;
70  left: 0;
71  position: absolute;
72  top: 0;
73  transition: all 0.25s;
74  width: 100%;
75  z-index: -1;
76}
77

And that's it for that. With a change of two variables, we could make a 10x10 or 25x25 grid.

Yeah, yeah, but your scientists were so preoccupied with whether or not they could that they didn't stop to think if they should.

— Dr. Ian Malcolm

Before wrapping up, I should mention that this is purely a proof of concept. Accomplishing this effect would be a job much better suited for JavaScript. It was a fun problem to tackle, though, and shows off some of SCSS's more advanced features, like its built-in functions, and what you can do with its @for loops.