WeChat QR Code Toggler
QR Code (img) pop out when hover an (WeChat) icon
HTML
<div class="container">
<a class="toggler">
<img src="http://via.placeholder.com/50X50"/>
</a>
</div>
CSS
.container {
position: relative;
}
a.toggler:hover::after{
transform: scale(1);
opacity: 1;
}
a.toggler::after{
content: url('http://via.placeholder.com/200X200');
position: absolute;
left: 60px; // Position
top: 60px; // Position
z-index: 99;
width: 160px;
height: 160px;
border-radius: 4px;
transform-origin: top right;
transform: scale(0);
opacity: 0;
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}