<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wordcloud"> <span class="wordcontainer" id="word01"><span class="word">Word01</span></span> <span class="wordcontainer" id="word02"><span class="word">Word02</span></span> <span class="wordcontainer" id="word03"><span class="word">Word03</span></span> <span class="wordcontainer" id="word04"><span class="word">Word04</span></span> <span class="wordcontainer" id="word05"><span class="word">Word05</span></span> <span class="wordcontainer" id="word06"><span class="word">Word06</span></span> <span class="wordcontainer" id="word07"><span class="word">Word07</span></span> <span class="wordcontainer" id="word08"><span class="word">Word08</span></span> <span class="wordcontainer" id="word09"><span class="word">Word09</span></span> <span class="wordcontainer" id="word10"><span class="word">Word10</span></span> <img id="logo" src="http://dunakin.com/projects/sears/companylogo.svg" /> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="2.5" /> </filter> <filter id="unblur"> <feGaussianBlur stdDeviation="0" /> </filter> </svg>

/*page stuff */ html {height:100%;} body {background:#343434;font-family:Arial, sans-serif;overflow:hidden;height:100%;} #wordcloud {width:100%;position:absolute;height:100%;min-width:768px;} /*set up word boxes*/ .wordcontainer { text-align:center; display:block; position:absolute; left:50%;top:50%;z-index:100; color:#aaa; text-transform:uppercase; opacity:.2; filter: url(#blur); /*for FF*/ filter: blur(2.5px); cursor:default; transition: all 1s linear; } .word { display:block; transition: all 3s linear; } #logo {width:300px;height:auto;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-65px;} /*position and style individual words*/ #word01 {font-size:30px; margin-left:-196px;margin-top:-155px;color:#febc1c ;} #word02 {font-size:36px; margin-left:-48px;margin-top:-210px;color:#fff;transform: rotate(90deg);} #word03 {font-size:48px; margin-left:85px;margin-top:50px;transform: rotate(90deg);} #word04 {font-size:110px; margin-left:-355px;margin-top:65px;color:#febc1c;} #word05 {font-size:96px; margin-left:10px;margin-top:-120px;color:#febc1c;} #word06 {font-size:96px; margin-left:-233px;margin-top:-322px;color:#f58120;transform: rotate(90deg);} #word07 {font-size:80px; margin-left:50px;margin-top:-180px;color:#fff;} #word08 {font-size:60px; margin-left:10px;margin-top:180px;color:#f58120;transform: rotate(90deg);} #word09 {font-size:60px; margin-left:-320px;margin-top:-125px;color:#fff;} #word10 {font-size:30px; margin-left:-235px;margin-top:-15px;transform: rotate(90deg);} /*hover fx*/ .wordcontainer:hover { opacity:1; filter: url("#unblur"); /*for FF*/ filter: blur(0px); z-index:1; text-shadow: 0 1px 3px #333333; transition: all 3s ease-out,text-shadow .1s linear; } .wordcontainer:hover .word{ transform: scale(1.5); transition: all 3s ease-out; }