Typo rollover

typo.polona.pl rollover

by Grzegorz Matyszewski

HTML

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="168.1px" height="19.3px" viewBox="0 0 168.1 19.3" enable-background="new 0 0 168.1 19.3" xml:space="preserve">
	<g class="polona">
         <path fill="#333333" d="M0,0.6h6.7c4,0,6.8,2.1,6.8,5.6v0.1c0,3.9-3.3,5.8-7.2,5.8h-5v6.8H0V0.6z M6.4,10.8c3.4,0,5.7-1.8,5.7-4.5
		V6.3c0-2.9-2.3-4.4-5.6-4.4H1.4v9H6.4z"/>
	<path fill="#333333" d="M15.4,9.8L15.4,9.8c0-5.1,3.7-9.5,9.3-9.5c5.6,0,9.2,4.4,9.2,9.4v0.1c0,5-3.7,9.5-9.3,9.5
		C19,19.2,15.4,14.8,15.4,9.8z M32.4,9.8L32.4,9.8c0-4.6-3.3-8.3-7.8-8.3c-4.5,0-7.8,3.7-7.8,8.2v0.1c0,4.5,3.3,8.3,7.8,8.3
		C29.2,18,32.4,14.3,32.4,9.8z"/>
	<path fill="#333333" d="M37.2,0.6h1.4v17.1h10.8v1.3H37.2V0.6z"/>
	<path fill="#333333" d="M50.2,9.8L50.2,9.8c0-5.1,3.7-9.5,9.3-9.5c5.6,0,9.2,4.4,9.2,9.4v0.1c0,5-3.7,9.5-9.3,9.5
		S50.2,14.8,50.2,9.8z M67.2,9.8L67.2,9.8c0-4.6-3.3-8.3-7.8-8.3s-7.8,3.7-7.8,8.2v0.1c0,4.5,3.3,8.3,7.8,8.3
		C64,18,67.2,14.3,67.2,9.8z"/>
	<path fill="#333333" d="M71.8,0.6h1.3l12.7,16v-16h1.3v18.3h-1L73.1,2.6v16.3h-1.3V0.6z"/>
	<path fill="#333333" d="M98.2,0.5h1.3l8.5,18.5h-1.5l-2.3-5.1H93.4l-2.3,5.1h-1.4L98.2,0.5z M103.6,12.6L98.8,2L94,12.6H103.6z"/>
    </g>
	<polygon fill="#333333" points="120,0.5 110.5,19 111.8,19 121.2,0.5" class="slash"/>
	<polygon points="120,37.4 110.5,19 111.8,19 121.2,37.4" class="slash slash-copy"/>
    <g class="typo">
	<path fill="#333333" d="M128.2,19V3.2h-2.7V0.4h9.2v2.8H132V19H128.2z"/>
	<path fill="#333333" d="M139,19v-6.1l-3.5-12.4h3.5l1.7,8.2c0.6-2.7,1.3-5.5,1.9-8.2h3.4l-3.5,12.4V19H139z"/>
	<path fill="#333333" d="M147.1,19V0.4h4.5c3.3,0,4.6,2,4.6,5.3c0,4.3-2,5.4-5.4,5.4h0v8H147.1z M150.8,8.3h0.2
		c1.6,0,1.7-0.9,1.7-2.8c0-1.5,0-2.5-1.6-2.5h-0.2V8.3z"/>
	<path fill="#333333" d="M157.2,12.8V6.6c0-3.7,1.3-6.6,5.4-6.6c4.1,0,5.4,2.9,5.4,6.6v6.2c0,3.6-1.3,6.6-5.4,6.6
		C158.5,19.3,157.2,16.4,157.2,12.8z...

CSS

body {
  background: #f2ece8;
}

#logo {
    cursor: pointer;
}
.slash {
    transition: transform .1s ease-out;
}
#logo:hover .slash {
    transform: translate(3px,-9.5px);
}
#logo:hover .slash-copy {
    fill: #333;
}
.polona, .typo {
    transition: opacity .1s linear;
}
#logo:hover .polona, #logo:hover .typo {
    opacity: 0.15;
}