<h2 class="cs-text"> <span>ر</span> <span>ط</span> <span>ي</span> <span>س</span> <span>ن</span> <span>لا</span> <span>ي</span> <span></span> </h2>
.cs-text { font-size: 50px; text-transform: uppercase; margin: 80px auto 0 auto; width: 580px; height: 100px; padding-left: 20px; font-family: 'McLaren', Arial; font-weight: 400; position: relative; } /* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */ .cs-text:before, .cs-text:after { content: " "; display: table; } .cs-text:after { clear: both; } /* end clearfix hack */ .cs-text span { cursor: default; display: block; float: left; border-radius: 50%; width: 100px; height: 100px; line-height: 100px; text-align: center; margin: 0 0 0 -20px; color: rgba(255,255,255,0.95); text-shadow: 0 -1px 1px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; } .cs-text span:nth-child(odd) { background: rgba(118,176,204, 0.8) url(../images/noise.png); } .cs-text span:nth-child(even) { background: rgba(58,126,162, 0.8) url(../images/noise.png); } .cs-text span:nth-child(1) { transform: translate(300%) translate(-60px); } .cs-text span:nth-child(2) { transform: translate(200%) translate(-40px); } .cs-text span:nth-child(3) { transform: translate(100%) translate(-20px); } .cs-text span:nth-child(5) { transform: translate(-100%) translate(20px); } .cs-text span:nth-child(6) { transform: translate(-200%) translate(40px); } .cs-text span:nth-child(7) { transform: translate(-300%) translate(60px); } .cs-text span:not(:last-child) { opacity: 0; pointer-events: none; } .cs-text span:last-child{ position: absolute; top: 0; left: 50%; margin-left: -50px; z-index: 100; background: url(http://i.imgur.com/K2nojG3.png) no-repeat center center #454545; } .cs-text:hover span:not(:last-child){ transform: translate(0%); opacity: 1; } .cs-text:hover span:last-child { opacity: 0; transform: scale(1.4); }