I'm currently working on implementing a hover image swap effect for my website gallery. The CSS code I have so far is below. While the original images in my HTML file are displaying correctly, the hover functionality is not working as expected.
CSS:
#gallery img {
max-height: 25%;
margin: 10px 10px 10px 10px;
float: right;
border-radius: 17px 0 17px 0;
border:2px solid #888888;
background-image: url(/images/ferrari.jpg);
background-image: url(/images/dalmation.jpg);
background-image: url(/images/hanauma.jpg);
background-image: url(/images/aircraft-sunset.jpg);
background-image: url(/images/crab.jpg);
background-image: url(/images/moth.jpg);
background-image: url(/images/lake.jpg);
background-image: url(/images/flag.jpg);
background-image: url(/images/aircraft-landing.jpg);
background-image: url(/images/tarantula.jpg);
display: block;
}
#gallery img :hover {
visibility: hidden;
}
------------------>HTML
<ul id="gallery">
<li><img src="/images/ferrari-gray.jpg" alt=""/></li>
<li><img src="/images/dalmation-gray.jpg" alt=""/></li>
<li><img src="/images/hanauma-gray.jpg" alt=""/></li>
<li><img src="/images/aircraft-sunset-gray.jpg" alt=""/></li>
<li><img src="/images/crab-gray.jpg" alt=""/></li>
<li><img src="/images/moth-gray.jpg" alt=""/></li>
<li><img src="/images/lake-gray.jpg" alt=""/></li>
<li><img src="/images/flag-gray.jpg" alt=""/></li>
<li><img src="/images/aircraft-landing.jpg" alt=""/></li>
<li><img src="/images/tarantula.jpg" alt=""/> </li>
</ul>