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
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>
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; }
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>