Hello Friends, today, we will create an image hover with a text overlay effect using CSS animation. Previously I have shared a menu hover animation with CSS animation. Check that out whether you haven't yet. In this image hover program with text overlay, we will use plain HTML and CSS to create a nice looking overlay effect on hover.
Today, in this project, we will create a hover effect like when someone hovers over the image, a blue angled shiny effect will occur from the top right corner of the image and disappear on the bottom left corner of it. But when we release the hover, the animation happens oppositely. Besides, the text will appear from the bottom and disappear in the same direction when we remove the hover.
For the HTML markup, I used the bootstrap framework to design the project. I took three images with the help of the bootstrap grid system. I used some random names and text as a piece of information for the pictures. I also used font-awesome icons as well underneath the text info.
I provided the bootstrap and font-awesome CDN file I used for this project below for your convenience.
You may also like:
In the CSS part, I used Poppins as the primary font. Then i have pure CSS command, which we use daily. There is no javascript or jquery used to create this program. This project will be useful for you if you are beginners and learn the implementation of CSS animation basics.
Image Hover CSS Animation with Caption Overlay (Source Code):
For the production of this snippet, we have to produce two different files. The Initial one is the HTML File, and the other one is the CSS file. You need to copy the HTML And CSS code given below and paste them to the appropriate files and save them. After that, run the project in your browser and modify according to your need.
HTML
CSS:
CSS:
I hope you like this tutorial. I hope it helps. Please follow this blog on our Twitter and Facebook Group to stay updated for the future posts.
Post a Comment
Please do not enter any spam link in the comment box.