Introduction
Hey guys & gals!
Are you looking to add flair to your website with a CSS image scroll on hover? Then be ready.
In today's post, I will explain how you can make your images shine!
No worries, this tutorial will be a short one. You will be able to learn how to do image scroll on hover and even background-image scroll on hover with only CSS.
See below on how does our solution look like in codepen:
<a>CodePen Link</a>
So after seeing what we will do in this code session of Problem Solver. Let's bring out our and start the code battle!
First: Coding the HTML Structure
Scroll image on hover works on simple principles:
The image we use must be a long one. Meaning its height must be longer than its width. Like in this example, I used a placeholder image with a long length.Next, we wrapped our image in a frame. In this example, I named it "your_frame". Your frame must have a fixed height too.I used Google Fonts purely for aesthetics, nothing else.
<!DOCTYPE html><html><head> <meta> <meta http-equiv="X-UA-Compatible"> <meta> <title>Image Scroll on hover(Css Solution)</title> <link> <link></head><body> <div> <h1>Image Scroll on hover(Css Solution)</h1> <div> <img src="https://source.unsplash.com/random/300×1500"> </div> </div></body></html>
Now you know the basic HTML point you need to remember for image scroll on hover. We are going to into the CSS part of this project:
Magic of Transform CSS Property
For CSS let me explain what we did:
In our fixed frame class "your_frame", we set CSS to "overflow: hidden". This can hide anything that might spill over our frame."object-fit: cover" is a brand new property in CSS3. You can read about it in detail on (Mozilla Docs). But what it does is: make our images fit into the container itself. This property is way better than setting your images to cover.Lastly, the CSS code that makes our code animate is:
"transform: translateY(0)"
"transform: translateY(calc(-100% + 400px))"We used the "+ 400px" according to our frame height. Do remember that!
Our Image moves or animates because — the Transform CSS property triggers the movement of the image across the Y-axis by the translateY action. Similarly, you can do horizontal scrolling by changing "translateY" to "translateX".
* { margin: 0; padding: 0;}body { font-family: 'Poppins', sans-serif; font-size: 16px;}.container { margin: 5px auto;}.your_frame { width: 500px; height: 400px; overflow: hidden; cursor: pointer;}.your_frame img { object-fit: cover; width: 100%; transform: translateY(0); transition: 5s ease-out;}.your_frame:hover img { object-fit: cover; transform: translateY(calc(-100% + 400px)); transition: 5s ease-out;}
Feel free to download this code from my GitHub link below: <a>Github Link</a>
Background Image Scroll on Hover
Similar to the above example of image scroll on hover, we can do the scroll image on CSS with background images too.
However, using background images has its drawback like you cannot simply lazy load them with the "lazyload" attribute. So keep that in mind in case your project needs lazy loading.
<a>CodePen Link<a>
Unlike our previous example, background-image animation works because of the CSS property: "background-position".
What we are doing is changing the "background-position" when we hover on the image frame. For the smoothing effect, we used the simple CSS transition.
Conclusion
I hope you enjoyed this article on image scroll on hover with CSS. I found this way of showing website template images cool to other clients. You can even add a lightbox on click of the image. Which will make your image pop out in front of your website visitors.
You can also check out my other post about <a>6 page scroll animation method.</a>
If you have any questions or concerns, please contact us anytime at . Or feel free to comment. We will reply fast!
YOU ARE READING
Image scroll on hover - 2 Methods with CSS
Non-FictionImage scroll on hover - 2 Methods with CSS. The CSS code is more compact and flexible. uses only CSS3 and JavaScript, and it is fully compatible with IE8+, Firefox, Opera, and Chrome. Another method uses jQuery and HTML5 data attributes. It is also...
