Scoroncocolo

Hover with 12 Image Files

First of all I'd like to thank Geoff Graham of CSS-Tricks for helping me to wrap my head around the magic of CSS Hover Effect

These Hover Effects activate when a user moves the mouse cursor over an image so obviously this isn't going to work well on a phone

How It Works

The HTML

Click HOVER CODE button to your right and you’ll see that the HTML code to create this Hoover Grid is a simple list of images within a div container

The CSS

In the CSS portion of the Hover Grid we first define some variables
--s: 150px; controls the size of the images
--g: 10px; controls the gaps between those images
--f: 1.5; controls the scale factor or how large the zoom effect will be

Hover with 18 Image Files

How It Works (continued)

And then we add the all-important CSS declaration display: grid to define the HTML element as a grid container, enabling it to become a two-dimensional layout system arranged into both rows and columns

To create that grid we ask the browser for three columns like this: grid-template-columns: repeat(3, auto); And CSS Grid will automatically add as many rows as needed to use all the images we specify in the HTML file
In the CSS code we have two variables that we have already defined, one that controls the size of the images and one that sets the size of the gap between images: width: calc(3*var(--s) + 2*var(--g)); meaning 3 times the size plus 2 times the gap

In the Hover Section of the CSS code we tell the browser that both the height and width are to be set to zero but yet we want both to be 100% of the size that we have already defined in the Grid defining section of the code when we wrote --s: 150px;
Now we need to increase the scale of the images when they are hovered on so to do that we adjust an image’s width and height in the Hover section of the CSS code
.hover img:hover{
filter: grayscale(0);
width: calc(var(--s)*var(--f));
height: calc(var(--s)*var(--f));
And both use -- s which we have already defined as 150px

There's nothing magical about --s being 150px in fact this Hover Grid is highly tweakable and in the panels below we'll investigate how as wizards and dancing animals we can change the looks of things

• View the Hover HTML and CSS

Altering the CSS

The first image on the right is the result of using the CSS code below when you apply it to a group of image files enclosed in div tags
Go HERE to see the Hover CSS and HTML code on one page

Change the CSS code

The image below it is almost the same CSS except we've changed the aspect-ratio
Writing aspect-ratio: 1; is the shortcut for aspect-ratio: 1/1; and it means that width and height are equal proportion
Writing aspect-ratio: 1/2; means height is twice the width
Here's the hover HTML and CSS code on one page

What other changes can we make
If we change the scale factor f from 1.5 to 3 here's what happens
The pop on mouse-over is twice as large

Change the CSS code

The image below it is almost the same CSS except we've changed the aspect-ratio
Writing aspect-ratio: 1; is the shortcut for aspect-ratio: 1/1; and it means that width and height are equal proportion
Writing aspect-ratio: 1/2; means height is twice the width
Here's the hover CSS and HTML code on one page

So as you can see the code is amenable to adjustment

You can play around with changing the s (size),g (gap) and f (bounce) variables

You can change the grayscale that will give you more of less color

Practically everything in the CSS AND the HTML can be adjusted or altered

Always remember that "we're here on Earth to fart around with stuff"

This is a picture of a CSS Grid image collage with an interesting border effect that we'll talk about eventually in another post

CSS Grid

This is another picture of a css image grid I want to write about in another post

This CSS Grid image is called Four Corners and I'm currently working on a post about this
Tap it or hover over it to make it split into four corners

Here is a link to the code

Thanks for the visit