0

How to add a gradual decrease in opacity (fade in effect ) to an image in CSS ????

25th Jun 2017, 2:35 PM
None
None - avatar
7 Answers
+ 6
try this.. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #box { opacity: 1; width: 100px; height: 100px; background-color: #f00; transition: opacity 1s; } </style> </head> <body> <div id="box" onclick="myFn()"></div> <script> function myFn() { document.getElementById("box").style.opacity = 0.5; } </script> </body> </html>
25th Jun 2017, 2:53 PM
Marco Macdon
Marco Macdon - avatar
+ 6
did it work?
25th Jun 2017, 2:54 PM
Marco Macdon
Marco Macdon - avatar
+ 5
img { opacity: 40%; /*can be scaled 0% to 100% */ }
25th Jun 2017, 2:37 PM
Marco Macdon
Marco Macdon - avatar
+ 4
you can also use these, put this on the style tag.. #img1 { opacity: 1; } #img2 { opacity: 0.5; } #img3 { opacity: 0.25; }
25th Jun 2017, 2:41 PM
Marco Macdon
Marco Macdon - avatar
+ 2
thanks ! i got it. applied it in one of my code https://code.sololearn.com/WLg1t3Qpdb6j/?ref=app
25th Jun 2017, 4:28 PM
None
None - avatar
+ 1
yeah that is working thanks
25th Jun 2017, 3:05 PM
None
None - avatar
25th Jun 2017, 3:59 PM
CalviŐ˛
CalviŐ˛ - avatar