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.
%= head %>
<%= siteHeader %>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.
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.
<a href="#" class="link dim black b">link text</a>
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.
<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>
<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>
<div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer">
Add pointer on hover to element.
</div>
Using the grow class on an element will cause it to scale to 1.05% of it's normal size on hover.
<a class="grow dib f3-ns no-underline bg-pink black-90 pa5" href="#">
Portfolio Project #11
</a>
<%= srccss %>