Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Unleash CSS3 transitions to create frayed edge rollover effects

Emulate the distinctive social rollovers found on’s Share section with a method for applying CSS style transitions

Emulate the distinctive social rollovers found on’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>
003 body {
005 background: #330066;
006 }
008 #container {
010    position: relative;
011    width: 800px;
012    height: 200px;
013    margin: 25% auto;
014 }
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 -->

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 }
007 .itemMask {
008 position: inherit;
009 width: 0px;
010 height: 200px;
011 opacity: 0;
012 }
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 }
005 a:hover .itemMask {
006 width: 210px;
007 opacity: 1;
008 }