Красивый эффект при наведении на элемент на чистом CSS

HTML

<script src="//yastatic.net/www/2.188/rapido/blocks/big/animation/snowdrift2014/_snowdrift2014.inline.js"></script>

<div class="animation__snowdrift2014" data-stat=""><canvas width="178" height="120" class="animation__snow"></canvas><div class="animation__snowdrift_1"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
    <path fill="#ffffff" stroke-linecap="round" stroke-width="2" d="M -30 90 L 0 90 M -5 90 C 45 90 37.4 78 67.4 78 S 115 90 195 90 M 120 90 L 200 90 Z" />
</svg></div><div class="animation__paranja" style="opacity: 0.0007014;"></div><div class="animation__snowflakes i-hidden"></div><div class="animation__controls"></div></div>

CSS

.animation__snowdrift2014{position:absolute;top:-19px;left:0;z-index:1;width:178px;height:120px;overflow:hidden}.animation__snow{position:absolute;top:0;left:0;z-index:3}.animation__snowdrift_1{height:100%}.animation__snowdrift_1,.animation__paranja{position:absolute;top:0;left:0;z-index:2;width:100%}.animation__paranja{height:93px;opacity:0;background-color:#fff}.animation__snowflakes{background-image:url("//yastatic.net/www/_/1/Z/T0AHvx2IoDmGGJHDQJtHvf2PA.png")}.animation__controls{position:absolute;opacity:.3;background:url("//yastatic.net/www/_/m/E/-yF57ZghFLPD1BY_vL8YVXpno.png") 0 0 no-repeat;cursor:pointer;z-index:5;top:15px;right:10px;width:12px;height:12px;display:none}.animation__snowdrift2014:hover .animation__controls{display:block}.animation__controls:hover{opacity:.6}div.animation__controls_play{background-position:0 -12px}.animation__gifts{position:absolute;background-position:0...