WeChat QR Code Toggler

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;
}
Show Comments