Within the code snippet, the icons are represented as images that tend to disappear when the mouse is swiftly moved over them. This issue arises due to the inclusion of a transition property that reduces the brightness of the image on hover. However, when the mouse is quickly passed over the images, they temporarily vanish and then reappear. How can this error be fixed?
header{
background:#000;
color:#FFF;
text-align:center;
padding:30px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:25px;
}
#iconwrap{float:left;}
#icon{
-webkit-transition: 0s -webkit-filter;
-webkit-transition-duration: .6s;
-webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
-moz-transition: 0s -webkit-filter;
-moz-transition-duration: .6s;
-moz-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
-o-transition: 0s -webkit-filter;
-o-transition-duration: .6s;
-o-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}
#icon:hover{
-webkit-filter: brightness(25%);
-moz-filter: brightness(25%);
-o-filter: brightness(25%);}<header>
Project-Mate
<nav>
<div id="iconwrap">
<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
</div>
</nav>
<header>