How to make Images move with CSS Hover Selector
I recently wanted to build a project dedicated to my love of football. More importantly, my love for Pittsburgh Steelers football. My idea was to make it like a YouTube/Netflix lookalike that shows some of my favorite players from each side of the football, but also giving users the ability to upload their own favorite players.
This part of the project is strictly just HTML and CSS. I wanted to add some type of animation to my home landing page to make the page look more appealing but at the same time lively and interactive. So I decided to add some animation styles to my image links. I am going to share just how I did this.
If you watch the video posted above, you will see the animation’s final result. Across the screen are four photos that are wrapped with <a> tags that will take you to a new part of the website. When you hover over these images, this is where the magic happens. Each image will receive a yellowish/gold solid border around them while also popping up from their position on the screen giving that more interactive/lively feel. While the image pops up, the wording across the image disappears on three of the four photos (I kept he last one so the image still made sense to the user and not just a plain logo).
To run the images across the page, I built a table for positioning. There are many ways to do this and get the same result like for instance — using the CSS Grid layout but I decided to just lay it out with a table.
Once I added all the HTML to the table, I wanted to add classes to the HTML, so that I could adjust certain parts of the table and add my animations.
Now that the HTML was complete, I moved over to my style sheet so that I could make the effects I wanted to. The first thing I wanted to do was to make sure that all the images were the same size and that they were taking up the same amount of space across the width of the screen. I adjusted the size of the image in the style sheet.
Next, I wanted to style the words that run across the images that say: “Offensive Players, Defensive Players, and Special Teams Players.” I applied some styles like their position on the images, added a text shadow, and the font-size — all by calling on the class from the HTML so that the style applied to all three images at the same time — saving me time not writing the extra code.
Last, I applied the hover selector so it gave that effect I wanted. You will see I also applied a z-index on the images when they are being hovered on so that nothing can stack on top of these images when the curser runs on top of them. The image below will show all of the styles.
The “scale()” defines a transformation on the 2D plane and either takes one or two values. The first value will apply to the x-axis and the second will apply to the y-axis. The values need to be separated by a comma. If you put in just one value, the same value will be applied to both the x and y-axis.
The transition shows how long the animation will take to run. In the example, I ran the scale for 0.5s — which is one half second. You can make it slower or faster if you wish.
There you have it. Here is a quick way to apply some animations to your web pages using plain CSS. Try it out for yourself and see what ideas/animations you can make happen!
Happy coding!
