Need some inspiration for a school project? I'm stuck on how to create a smooth image fade effect in CSS when hovering over another element (like an anchor link) on the same page.
I've been attempting to use the :target and not(:target) selectors, where one image fades when targeted. Here's what I have so far:
.home > img
{
opacity: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease
}
.home > img:target {opacity: 1;}
.home > img:not(:target) {opacity: 0;}
However, I'm sure there must be a way to achieve this effect using hover instead. Any ideas?