The document provides examples of using CSS transitions and filters to add interactive effects to links and elements on web pages. Some key examples include: 1. Adding link transitions with CSS properties like color, background, and padding to change the appearance of links on hover. 2. Using CSS transitions on height, width, opacity and other properties to reveal or hide additional content on hover over various page elements like navigation items, buttons and product listings. 3. Applying CSS filters like grayscale, sepia, hue-rotate, contrast and invert to images and blocks of content and changing the filter on hover for interactive effects. 4. Demonstrating the use of CSS transitions and filters through code snippets and examples on

1. Making Links Magical Again with CSS
Re:build 2012
@jennlukas

5. http://owltastic.com/

6. / Link Transition (all/color)
l a {
! text-decoration: none;
! color: #5e9092;
! -webkit-transition: all 0.2s linear;
! -moz-transition: all 0.2s linear;
! -o-transition: all 0.2s linear;
! transition: all 0.2s linear;
}
a:hover {
! color: #96c0c2;
}

7. http://2012.dconstruct.org/

8. http://2012.dconstruct.org/

9. / Transition (all: BACKGROUND, COLOR,PADDING)
l .speakers-list li span { background-color:#222; background:rgba(0,0,0,0.8); color:
rgba(255,255,255,0.7); text-transform: uppercase;font-size: 0.7em; position:
absolute; right: 0; left: 0; bottom: 0; padding: 5px 10px;
! -webkit-transition: all 0.3s ease-out;
! -moz-transition: all 0.3s ease-out;
! -ms-transition: all 0.3s ease-out;
! -o-transition: all 0.3s ease-out;
! transition: all 0.3s ease-out;
}
.speakers-list li a:hover span { background: rgba(255,255,255, 0.8); color: #111;
padding-bottom: 20px; }

10. Don’t stallone It

11. O Music Awards 2

12. http://cog.gd/43y

13. http://jsfiddle.net/Jenn/WG3NE/

14. http://jsfiddle.net/Jenn/WG3NE/

15. / List Item( HTML)
l <li>
! <a href="#">
! ! <div class="grid-info">
! ! ! <h2><span>Must Follow</span><br /><span>Artist on Twitter</span></h2>
! ! ! <div class="grid-reveal">
! ! ! ! <p>For those of you with more than three tattoos of the same band, we
salute you.</p>
! ! ! ! <p class="grid-sponsor">Sponsored by <img src="http://placekitten.com/
80/20" width="80" height="20" alt="Loreal Paris" /></p>
! ! ! </div>
! ! </div>
! </a>
</li>

16. / List Item(CSS)
l li { width: 333px; height: 278px; position: relative; }
a { display: block; width: 100%; height: 100%; background: #9cf; text-decoration:
none; }
.grid-info { position: absolute; bottom: 0; }
.grid-reveal { overflow: hidden; max-height: 0; background: #c0b3b3;
-webkit-transition: all 0.7s linear;
}
a:hover .grid-reveal, a:focus .grid-reveal { max-height: 250px; }

18. http://omusicawards.com/vote

20. / Vote Divs (HTML)
l <div class="block-paper grid-item">
! <a href="#">
! ! <h3><span>Vote Now!</span> <strong>Category Title</strong></h3>
! ! <p class="grid-desc">They pledge rapid allegiance to the band.</p>! !
! ! <span class="frame"><img src="http://placehold.it/265x265" alt="" /></span>
! ! <p class="vote-count count-hot"><strong>5,000</strong> votes per hour</p>
! </a>!
</div>

21. / Vote Hovers (CSS)
l a:hover, a:focus { text-decoration: none; color: #231f20; }
a:hover strong, a:focus strong { background: #a2e5d2; }
a:hover p.grid-desc, a:focus p.grid-desc { max-height: 300px; margin-bottom: 12px; }
a:hover h3 span, a:focus h3 span { max-height: 100px; }
a:hover .vote-count, a:focus .vote-count { max-height: 0; margin: 0; padding: 0; }

22. http://omusicawards.com/vote

23. http://galleryofmo.co.uk/

25. http://galleryofmo.co.uk/

26. http://galleryofmo.co.uk/

27. / Navigation and badge hovers
l section#header ul li.count a { position:absolute; top:40px; right:640px; color:#282828;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
section#header ul li.count a:hover { color:#6ebeb7; top:30px; }
a.site:hover { top:110px; }

28. http://itsnumbered.com/

29. http://itsnumbered.com/

30. http://itsnumbered.com/

31. http://itsnumbered.com/

33. / Product HTML
l #featured-products_block_center li div.under {
! bottom: 0;
! position: absolute;
! height: 5px;
! background: #fff;
! border-top: 20px #F0F1EC solid;
! left: 0;
}
#featured-products_block_center li:hover div.under {
! background: #d34132;
}

34. http://codepen.io/Jenn/pen/ztHvx

35. / Product link css
l a { color: #333; text-decoration: none; text-transform: uppercase; font: bold 12px
arial; display: block; position: relative; padding: 10px; }
a:after { content: ''; height: 5px; width: 100%; position: absolute; bottom:
-20px; left: 0; background: #fff; }
a:hover h2 { color: red; }
a:hover:after { background: red; }

36. http://codepen.io/Jenn/pen/ztHvx

37. http://codepen.io/Jenn/pen/ztHvx

38. http://coworkchicago.com/

40. http://coworkchicago.com/

41. / Link Transition (height, Margin)
l join-buttons .daily, .join-buttons .monthly { height: 260px; z-index: 0; margin-top:
30px;
! transition: height .2s linear,margin .2s linear;
! -o-transition: height .2s linear,margin .2s linear;
! -moz-transition: height .2s linear,margin .2s linear;
! -webkit-transition: height .2s linear,margin .2s linear;
}
.join-buttons .daily:hover, .join-buttons .monthly:hover { height: 280px; margin-top:
20px; }
li.button:hover { z-index: 20; }

42. http://coworkchicago.com/

43. / Hover rotation
l .peepcard { width: 125px; height: 189px; float: left; position: relative;
! -webkit-transition: -webkit-transform .2s ease-out;
! -moz-transition: -moz-transform .2s ease-out;
! -o-transition: -o-transform .2s ease-out;
}
.feat4 { top:13px; left:2px;
! -webkit-transform:rotate(-3deg);
! -moz-transform:rotate(-3deg);
! -ms-transform:rotate(-3deg);
! -o-transform:rotate(-3deg)
}
.feat4:hover {
! -webkit-transform:rotate(-2deg);
! -moz-transform:rotate(-2deg);
! -ms-transform:rotate(-2deg);
! -o-transform:rotate(-2deg)
}

44. http://www.rdio.com/

45. http://www.rdio.com/

46. http://www.rdio.com/

47. http://www.rdio.com/

49. / layering opacity effects
l .Index .stripe#heroes .arrow.up { background-position: top left; left: 0; }
.Index .stripe#heroes .arrow.down { background-position: top right; right: 0; }
.Index .stripe#heroes .arrow { background-image: url(/media/marketing/images/heroes/
arrows.png); cursor: pointer; height: 460px; opacity: 0; position: absolute; width:
190px; z-index: 201;
! -webkit-transition: opacity 0.25s;
! -moz-transition: opacity 0.25s;
! -ms-transition: opacity 0.25s;
! -o-transition: opacity 0.25s;
! transition: opacity 0.25s;
}
.Index .stripe#heroes:hover .arrow.bottom { opacity: 1; }
.Index .stripe#heroes .arrow.top:hover { opacity: 1; }

50. http://funnelbox.com

53. / Div mask & width transitions
l .marquee .ctaMask {! position:absolute; top:360px; overflow:hidden; width: 51px;
! transition: width 0.5s ease-out;
! -moz-transition: width 0.5s ease-out;
! -webkit-transition: width 0.5s ease-out;
}
.marqueeWrap.interactive:hover .ctaMask { width:550px; }
.marquee .ctaLinks span.link, .marquee .ctaLinks span.arrow.secondary { opacity:0;
filter:alpha(opacity=0);
! transition: opacity 0.5s ease-in-out;
! -moz-transition: opacity 0.5s ease-in-out;
! -webkit-transition: opacity 0.5s ease-in-out;
}
.marqueeWrap.interactive:hover .ctaLinks span.arrow.secondary {
! opacity:1;
! filter:alpha(opacity=100);
}

54. http://www.emporiumpies.com/pies

55. http://www.emporiumpies.com/pies

56. css-tricks.com/almanac/properties/b/backface-visibility/

57. Experiments!!

58. http://mammothbooth.com/#/faq.html

59. http://mammothbooth.com/#/faq.html

60. http://codepen.io/Jenn/pen/qsklF

61. / Sliding Box (HTML)
l <div>
<h2>How Much Does It cost?</h2>
<img src="http://placekitten.com/100/50" />
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself
transformed in his bed into a horrible vermin. He lay on his armour-like back, and if
he lifted his head a little he could see his brown belly, slightly domed and divided by
arches into stiff sections. </p>
</div>

62. / Sliding Box (CSS)
l div { background: #f90; width: 500px; padding: 20px; position: relative;
overflow: hidden; }
h2 {position: absolute; left: 10px; top: 0px; transition: top
0.2s linear; }
position: absolute; right: 20px; bottom: 15px; transition:
img {
bottom 0.2s linear; }
p { opacity: 0; transition: opacity 0.5s linear; }

63. http://codepen.io/Jenn/pen/qsklF

64. / Sliding Box HOvers(CSS)
l div:hover {
p {!
! opacity: 1;
}
img {
bottom: -100px;
}
h2 {
top: -100px;
}
}

66. http://circlesconference.com/

67. http://circlesconference.com/

68. http://codepen.io/Jenn/full/grjcd

69. http://codepen.io/Jenn/pen/grjcd

70. http://codepen.io/Jenn/pen/grjcd

71. http://codepen.io/Jenn/pen/grjcd

72. http://codepen.io/Jenn/pen/grjcd

73. / CSS Filters (grayscale)
l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:
grayscale(100%); }

74. http://codepen.io/Jenn/pen/grjcd

75. / CSS Filters (sepia)
l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:
grayscale(100%) sepia(90%); }

76. http://codepen.io/Jenn/pen/grjcd

77. / CSS Filters (hue-rotate)
l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:
grayscale(100%) sepia(90%) hue-rotate(90deg); }

78. http://codepen.io/Jenn/pen/grjcd

79. / CSS Filters (contrast)
l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:
grayscale(100%) sepia(90%) hue-rotate(90deg) contrast(110%); }

80. http://codepen.io/Jenn/pen/grjcd

81. / CSS Filters: Hover
l img { margin: 0 0 10px; border-radius: 100px; display: block; -webkit-filter:
grayscale(100%) sepia(90%) hue-rotate(90deg) contrast(110%); -webkit-transition: all
0.5s linear; }
a:hover, a:focus {
img {
! ! -webkit-filter: grayscale(70%) sepia(100%) hue-rotate(0deg) contrast(110%);
}
span {
color: #fff;
}
}

83. http://codepen.io/Jenn/full/grjcd

84. http://www.readability.com/

85. http://cog.gd/4hk

86. http://thenerdary.net/

87. http://codepen.io/Jenn/full/gCKex

88. http://codepen.io/Jenn/full/gCKex

89. / CSS Filters: Invert
l body { background: #818291; font-family: arial; }
.wrap { width: 600px; margin: 20px auto; padding: 20px; background: #fff; }
h1 { text-transform: uppercase; margin: 0 0 20px; }
p { margin-bottom: 20px; }
.code-block { border: 5px solid #1d1f1d; background: #fff; font-family:
monospace; box-shadow: 2px 2px 5px rgba(0,0,0,0.9);}
.code-block:hover { -webkit-filter: invert(1); }
.code-block ::selection { background: #3639d9; color: #fff; }

90. http://codepen.io/Jenn/full/HKoAl

91. http://codepen.io/Jenn/full/HKoAl

92. / CSS Filters: Invert (The Nerdary)
l pre {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #484742;
border-radius: 5px;
color: white;
font-size: 10pt;
font-size: 1rem;
padding: 15px;
max-width: 580px;
overflow: auto;
}
pre:hover { -webkit-filter: invert(1); }

93. http://codepen.io/Jenn/full/eFcux

94. http://codepen.io/Jenn/full/eFcux

95. / CSS Filters: Blur
l article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;
position: relative; -webkit-filter: blur(2px); }

96. http://codepen.io/Jenn/full/eFcux

97. / CSS Filters: Blur
l article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;
position: relative; -webkit-filter: blur(2px); }
article:hover { -webkit-filter: blur(0px); }

98. http://codepen.io/Jenn/full/eFcux

99. http://codepen.io/Jenn/full/eFcux

100. / CSS Filters: Blur, Invert
l article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;
position: relative; -webkit-filter: blur(2px); }
article:hover { -webkit-filter: blur(0px); }
article:focus { -webkit-filter: blur(0px) invert(1); }

101. http://codepen.io/Jenn/full/eFcux

102. / CSS Generated Messages
l article { padding: 20px; border-bottom: 5px solid #333; background: #fff; color: #222;
position: relative; -webkit-filter: blur(2px); }
article:hover { -webkit-filter: blur(0px); }
article:focus { -webkit-filter: blur(0px) invert(1); }
article:hover:before { content: 'Click on/off to invert';
position: absolute; right: 5px; top: 5px; background: #000;
color: #fff; padding: 5px; font: bold 12px Arial; text-transform:
uppercase; }

103. http://codepen.io/Jenn/full/eFcux

104. http://codepen.io/Jenn/full/eFcux

107. http://cog.gd/44c

108. http://cog.gd/44c

109. http://cog.gd/44d

111. http://cog.gd/44d

112. / Burt vs Tom HTML
l <header class="wrap">
! <h1>Tom Selleck or Burt Reynolds?!?</h1>
! <p class="adjunct"><strong class="left">Tom Selleck</strong> <strong
class="right">Burt Reynolds</strong></p>
</header>
<div role="main" class="wrap">
! <div class="tom"><span><img src="i/1.jpeg" alt="1" width="" height="" /></span>
<strong>It's Tom!!</strong></div>
! <div class="burt"><span><img src="i/3.jpeg" alt="1" width="" height="" /></span>
<strong>Burt here!!</strong></div>
! <div class="tom"><span><img src="i/4.jpeg" alt="1" width="" height="" /></span>
<strong>Tom strikes again!!</strong></div>
! <div class="burt"><span><img src="i/5.jpeg" alt="1" width="" height="" /></span>
<strong>Burt is the word!!</strong></div>
</div>

113. / Burt vs Tom CSS
l div { width: 100%; position: relative; min-height: 95px; margin: 0 0 5px; }
span { position: absolute; display: block; padding: 10px 0 5px; width: 100px; text-
align: center; -webkit-transition: all 0.35s ease-in-out 0.5s; }
.tom span { left: 330px; }
.burt span { right: 330px; }
.tom:hover span { left: 0; }
.burt:hover span { right: 0; }
img { display: inline-block; }
div strong { display: block; padding: 15px 0 0 110px; opacity: 0; -webkit-transition:
opacity 0.35s ease-in-out 0.6s; }
div.burt strong { padding: 15px 110px 0 0; text-align: right; }
div:hover > strong { opacity: 1; }

114. This cat totally loves hovers.