//  this is an experimental example of
//  how we can achieve mouse tracking with pure css

//  how does it work?


//  i created the grid out of 500 div elements
//  that i use to track where the pointer is.
//  setting $sensitivity means setting how many of 
//  grid-items will be in a row.

//  playground is a div behind all grid-elements
//  that has one circle (point) which position is
//  controlled by :hover-ing on grid-elements


div.grid
    - for(var x = 1;x <= 500;x++)
      div.grid-item
    div.playground
        span.point
View Compiled
@import 'compass';
$point-size: 1;
$point-color: white;
$elements-in-grid: 500; // from html part
$sensitivity: 30; // The higher number - higher sensitivity. 
                // For best result set from 10 to 50


* { @include box-sizing(border-box); }
body { overflow: hidden; }
.grid {
    position: absolute;
    z-index: 999;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow-y: scroll;
    width: calc(100vw + 17px);
    .grid-item {
        position: relative;
        z-index: 20;
        float: left;
        width: 100 / $sensitivity + vw;
        border: 1px solid rgba(white, .02);
        @for $i from 1 through $elements-in-grid {
            &:nth-child(#{$i}) {
                &:hover {
                    & ~ .playground {
                        .point {
                            $row: ceil(($i/$sensitivity));
                            top:   ($row * (100 / $sensitivity)
                                 - ((100 / $sensitivity)/2))
                                 - ($point-size / 2)
                                 + vw;
                            left:  (($i - (($row - 1) * $sensitivity ))
                                 * (100 / $sensitivity))
                                 - ((100 / $sensitivity) / 2) - ($point-size / 2)
                                 + vw;
                        }
                    }
                }
            }
        }
    }
    .playground {
        position: relative;
        z-index: 1;
        width: 100%;
        height: ($elements-in-grid * 100) / ($sensitivity * $sensitivity) + vw;
        background: #dad299;
        @include background-image(linear-gradient(to top, #dad299, #b0dab9));
        .point {
            position: absolute;
            display: block;
            width: $point-size + vw;
            background-color: $point-color;
            @include border-radius(50%);
            @include box-shadow(rgba(0,0,0,.1) 0px 10px 30px);
            @include transition(all, .2s);
        }
    }
}
.grid-item,
.point {
    &:after {
        display: block;
        padding-bottom: 100%;
        content: '';
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.