← All elements
<a class="pc-swap" href="#">
<span class="pc-swap__frame">
<span class="pc-swap__img pc-swap__img--front"></span>
<span class="pc-swap__img pc-swap__img--back"></span>
</span>
<span class="pc-swap__title">Linen Overshirt</span>
<span class="pc-swap__price">₱3,200</span>
</a>About this hover effect
A product tile that crossfades to a second image on hover and keyboard focus, built from two stacked layers and one opacity transition. Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.