By
Emulate the distinctive social rollovers found on district13.co.in’s Share section with a method for applying CSS style transitions
Get the code to help complete this tutorial
Set starting styles
Visit the Share section of District13 and you’ll find four social icons. As you roll over each of these, the background shifts on hover to add a distinctive frayed edge effect. This is achieved by an elegant combination of transparent PNGs and a simple CSS transition as explained here. Start a new HTML page and add some initial style classes:
001 <style>
002
003 body {
004
005 background: #330066;
006 }
007
008 #container {
009
010 position: relative;
011 width: 800px;
012 height: 200px;
013 margin: 25% auto;
014 }
015 /* ADD EXTRA STYLES HERE */
016 </style>
Menu item elements
Further classes will be added once page elements are added. So in the <body> we want a <div> container holding four <a> links that we’ll add unique classes for. Inside these goes an <img> element that will be the frayed rollover background, plus another <div> styled to hold each menu item label:
001 <body> 002 <div id=”container”> 003 <a href=”#” class=”itemOne”> 004 <img src=”rollMask1.png” class=”itemMask shiftAll”> 005 <div class=”itemLabel shiftAll”></div> 006 </a> 007 <a href=”#” class=”itemTwo”> 008 <img src=”rollMask2.png” class=”itemMask shiftAll”> 009 <div class=”itemLabel shiftAll”></div> 010 </a> 011 <!-- REPEAT x4 --> 012 013</div> 014</body>
Make rollover mask images
We can observe from this that we’ll need four ‘rollMask’ PNGs in the page root. These provide the coloured, frayed rollover mask that will be hidden by the CSS. These are sized 200 by 210 pixels and have jagged left and right edges cut out of a transparent background, creating the frayed effect.
Edit the rollover label images
Secondly we also require four ‘label’ PNGs, double-sized (200 by 400 pixels) to contain both default and hover rollover states, like a sprite sheet. We’ll use numbers here in contrasting colours on a transparent background, making sure they are positioned identically and named ‘Ones.png’, ‘Twos.png’ and so on.
Set the backgrounds
Each item <a> link is then styled to be positioned (absolute) 0px, 200px, 400px and 600px so they form a row. Here the background colour is translucent white, which we’ve staggered, and provides subtle tone against the page. Selector classes then apply each of the label PNGs, positioned top-right for the default state:
Initialise default styles
We now need some initial styling for the item <a> links to set position absolutely and sized 200 by 200px to fit. The itemMask class will hide each mask with zero width and opacity. Lastly, the itemLabel class sizes are <div> 200 by 200px each and are lined up along the row:
001 a {
002 position: absolute;
003 width: 200px;
004 height: 200px;
005 }
006
007 .itemMask {
008 position: inherit;
009 width: 0px;
010 height: 200px;
011 opacity: 0;
012 }
013
014 .itemLabel {
015 position: inherit;
016 display: block;
017 width: 200px;
018 height: 200px;
019 }
Attach the transition
A CSS3 transition goes inside the shiftAll class attached to each <img> mask and <div> label. This animates the style changes we’ll define in hover pseudo classes for each <a> element. District 13 uses a custom cubic-bezier() timing function with specific parameters. You could, however, use a linear alternative (commented) to add your own twist.
Hover pseudo classes
To finish we need two pseudo classes for a:hover, defining end style states that the shiftAll transition invokes. First, these shift the item label <div> background along to show the opposite half and contrasting number. Second, they make the mask image visible by setting the full width to 210px, so that it overlaps, and the opacity to fully opaque!
001 a:hover .itemLabel {
002 background-position: left top;
003 }
004
005 a:hover .itemMask {
006 width: 210px;
007 opacity: 1;
008 }
