You likely have an image gallery or a blog post thumbnail gallery on your website, if so, this article will definitely help you bring your gallery to life and make it more interactive. To discover how to do this, read on.
It's actually very simple and you can do it with about 20 lines of code in total, but the result is awesome. Sliding animated images are much more appealing than static images
First we need to make the gallery itself in HTML
<div id="gallery">
<!-- this is where your images go -->
<div>
Note that this code will not show anything because the src attribute needs to be added.
Additionally add the alt attribute so that if the image doesn't load you will still have some text in its place. Now so that your gallery isn't all stacked vertically let's make it flex with CSS.
Firstly create CSS file and copy or write this code inside it
#gallery{
display: flex;
}
#gallery img {
margin: 3rem 1.5rem;
border-radius: 1rem;
max-width: 40rem;
}
Now we have a flexed image gallery, but it sadly doesn't do anything. I added a border-radius property because I don't like completely square images, but if that's okay with you, you can delete it.
In the next step we will make the images slide upwards when you hover over them with css transition, so hang on.
Firstly add this code to the #gallery img selector:
transition: all 400ms ease-in-out;
Now we will need to make the actual transition using this code:
#gallery img:hover{
transform: translateY(-1.2)
}
Look at your image gallery, it looks awesome, and even has a cool animation. You can be proud of yourself now.
Top comments (0)