How to create HTML CSS Image Revealing Animation? Let’s create an Animated Image Reveal In Pure CSS.
Previously I had shared Text Reveal in Pure CSS, Now time to create Image Reveal. Basically, the whole concept is a box over an image and go left to right with delay 2s. & when box reveals then there is also an overlay effect on the image.
These type of effect you can see on some websites, they use image reveal effect for attracting visitors. If you use HTML & CSS properly then you will realize the power of pure HTML CSS. So many things, you do with JS but we can do with CSS only. But JavaScript saves time, & easy to use. I am not saying that don’t use JavaScript But learn to create programs with HTML & CSS only.
So, Today I am sharing an Animated Image Reveal Program in Pure CSS and HTML. I an giving a good example and also sharing source code. After seeing the programs code you will learn how this program works. Then you can create a more attractive image reveal effect. Now you are thinking how this program actually is, Don’t worry see this preview given below.
Preview Of Image Revealing Program
See this video preview to getting an idea of how this program looks and works.
Now you can see how this program is looking visually. If you like this, then get the source code of this program given below.
You May Also Like:
Animated Image Reveal In Pure CSS Source Code
Before sharing source code, I want to say little bit about this program. First, I put an image, then I put a div over the image. & used the CSS position (info) property position:relative & position:absolute. After that, I had created two @keyframe One for moving the div, & one for increase opacity of the image.
For creating this Image reveal program, You have to create only 2 files. One for HTML, & one for CSS. Follow the step for creating this program without any trouble.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>CSS Image Reveal | Webdevtrick.com </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="img-container"> <img class="img" src="https://webdevtrick.com/wp-content/uploads/1.jpg" alt=""> <div class="overlay"></div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* code by webdevtrick ( https://webdevtrick.com ) */ body { width: 100vw; height: 100vh; position: relative; } .img-container { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; border-radius: 2px; overflow: hidden; } .img-container img { max-width: 100%; heigth: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.3); animation: pic 2s; animation-fill-mode: forwards; } .img-container .overlay { width: 100%; height: 100%; background-color: #EB5F00; position: absolute; transform: scaleX(0); transform-origin: 0% 50%; animation: overlay 2s; } @keyframes pic { 0% { opacity: 0; } 50% { opacity: 0; } 51% { opacity: 1; } 100% { opacity: 1;transform: translate(-50%, -50%) scale(1); } } @keyframes overlay { 0% { transform: scaleX(0); transform-origin: 0% 50%; } 50% { transform: scaleX(1); transform-origin: 0% 50%; } 51% { transform: scaleX(1); transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } } |
That’s It. Now you have successfully created an Animated Image Reveal In Pure CSS program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Are you help we? You make cookie alert…
Yes, You have subscribed notification. If you have any kind of problem you can unsubscribe by pressing on the bell button. Thanks for visiting, Please stay connected.