The opacity effect is the simplest, all we have to do is to hide all the elements through the property opacity:0
, except the one that corresponds to the clicked bullet. To obtain a nice fading effect, we can then specify a transition period between the two states using the transition
property.
A trick we have to implement here is to attach this behavior only when the
opacity radio button is selected in our settings panel. To accomplish this, we can place another selector, #opacity:checked
, before the rule:
/* == [BEGIN] Opacity == */
#opacity:checked ~ section figure{
opacity: 0;
transition: opacity 0.4s;
}
#opacity:checked ~ a:not(:target) + a:not(:target) + a:not(:target) + a:not(:target) + a:not(:target) ~ section #shot1,
#opacity:checked ~ a[name=picture1]:target ~ section #shot1,
#opacity:checked ~ a[name=picture2]:target ~ section #shot2,
#opacity:checked ~ a[name=picture3]:target ~ section #shot3,
#opacity:checked ~ a[name=picture4]:target...