I have some CSS that swaps out an image when a user mouses over it, then fades the original image back in when the user mouses away again.
<div class="swap>
<a>
<img src="https://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg">
</a>
</div>
and:
.swap {
background-image: url('https://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.swap a {
display: block;
}
.swap a img {
opacity: 1;
height: auto;
display: block;
transition: all .9s ease-in-out;
}
.swap a:hover img {
opacity: 0;
transition: all .6s ease-in-out;
}
This is taken from @SamA74’s answer in this thread.
This works fine on desktop, but I’d like to make the image toggle on click too, so that touch devices are not left out.
I’ve tried targeting the anchor’s active state:
.swap a:hover img,
.swap a:active img {
...
}
And adding an onclick
attribute to the containing div:
<div class="swap" onclick="void(0)">
But neither of these solutions worked on the iPad2 I am testing on. What am I missing?
Here is a CodePen demonstrating my problem: