<%= head %> <%= siteHeader %>

Hovers

There are several classes for adding hover effects to elements. Hover effects can be used to give visual affordance to the user that an element can be interacted with.

Examples

Dim Text

You can dim any element, including text links on hover and focus with the dim class. It will fade the element to an opacity of 50% in 150ms.

link text <a href="#" class="link dim black b">link text</a>

Dim Card

You can dim any element on hover and focus with the dim element. Not just text. Here is a card component that will dim on hover.

SF at night Card title <a href="#" class="link black dim db mw5 pa2 br2 ba b--black-10 shadow-1"> <img src="http://mrmrs.io/photos/037.jpg" alt="SF at night" class="db mb2 mw-100" /> <span class="db f6 pv2">Card title</span> </a>

Reveal Children on Hover

This is some card content <a href="#" style="background-image: url(http://mrmrs.io/images/0010.jpg); class="link mw5 dt hide-child br2 cover bg-center" "> <span class="white dtc v-mid w-100 h-100 child bg-black-40 pa5"> Card title </span> </a>

Add pointer on hover

<div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer"> Add pointer on hover to element. </div>

Grow on Hover

Using the grow class on an element will cause it to scale to 1.05% of it's normal size on hover.

Portfolio Project #11 <a class="grow dib f3-ns no-underline bg-pink black-90 pa5" href="#"> Portfolio Project #11 </a>

Previous

Skins

<%= name %>

v<%= moduleVersion %> <%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

Source code src/_hovers.css


<%= srccss  %>

<%= navDocs %>
<%= siteFooter %> <%= googleAnalytics %>