New course! Every coder should learn Generative AI!
Try a free lesson0
How to add a gradual decrease in opacity (fade in effect ) to an image in CSS ????
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>
+ 6
did it work?
+ 5
img {
opacity: 40%;
/*can be scaled 0% to 100% */
}
+ 4
you can also use these, put this on the style tag..
#img1 {
opacity: 1;
}
#img2 {
opacity: 0.5;
}
#img3 {
opacity: 0.25;
}
+ 2
thanks ! i got it. applied it in one of my code
https://code.sololearn.com/WLg1t3Qpdb6j/?ref=app
+ 1
yeah that is working thanks
+ 1
Here you go..
https://code.sololearn.com/WF7TFRMeZwKC/?ref=app
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help me plss
0 Votes
Android studio emulator
0 Votes
Return function
1 Votes
[SOLVED] About split() Function
1 Votes
help me
0 Votes
Every one solve this problem
1 Votes
Can i get a refund
0 Votes