A test case of hover tiles

To find inspiration as a web designer/developer, one must be an explorer in the vast wonderland we call the internet. During one such outing, i came across a new kind of display gallery in the Jio home page. This is a div section with multiple tiles within it. When hovered on each of the children tiles, the parent background changes, while revealing content within the tile. These tiles have user reviews and feedback about the product.

I had noticed that this structure worked with the help of javascript with the "onmouseover" function. I wondered if this effect can be replicated with pure CSS. CSS nowadays is becoming more and more powerful, especially with the superpowers provided by the preprocessor SASS. So i set out to experiment if my theory stands true. I felt this could be an excerise to practice and develop further my skills in SASS based CSS coding.

After starting out with the development, i realised that the properties of SASS/CSS that i had assumed were the key to building this without javascript, the ":has" and ":parent" psuedo selectors weren't supported by most browsers as yet. Not to be disheartened, I tried to build the same using javascript/jQuery with the support of CSS.

The solution i have come up with are shown below as 3 alternatives. Use the quick floating navigation on the left or jump directly to the code by clicking any of the links below.

using SASS/CSS classes with jQuery Using just jQueryUsing vanilla javascript

Using SASS/CSS classes with jQuery

In the example below, there are two methods of generating classes using loops in SASS. You can click on the "view compiled code" button in the scss tab to view the compiled CSS code.

In the first method of generating CSS classes, we can use a variable list of Static URLs, and @each loop for generating multiple classes with different background images.

In the second method, we can use a @for loop, to call the images from our "images" folder in the project structure.

In both the methods, the HTML and JS do not change.

Using just jQuery

In the example below, the concept is implemented using just jQuery. The variable array list is used to feed URLs to match the correct index when the tile is hovered on.

A second method is commented out, where we can just call the images from our "images" folder in the project structure.

In both the methods, the HTML and CSS do not change.

using vanilla javascript

In the example below, the concept is implemented using just vanilla javascript with no library dependency. The variable array list is used to feed URLs to match the correct index when the tile is hovered on.

A second method is commented out, where we can just call the images from our "images" folder in the project structure.

In both the methods, the HTML and CSS do not change.