Hover Classes

<div class="frctl-section frctl-class-demo frctl-class-demo--group">

    <p style="margin-bottom: 2.4rem;">Basic Hover Styles</p>
    <p class="f-text--small" style="margin-bottom: 2.4rem;">Typically these classes should be used in span tags that wrap the content. This allows lines to wrap text as needed.</p>
    <div style="padding: 0 2.4rem;">

        <div class="frctl-class-demo__text">Span class: <code class="fractal-code frctl-class-demo__class-name">u-hover-drawline</code></div>
        <div class="frctl-section__entry">
            <h2><span class="u-hover-drawline">Draw Underline</span></h2>
        </div>

        <div class="frctl-class-demo__text">Span class: <code class="fractal-code frctl-class-demo__class-name">u-hover-drawline--thin</code></div>
        <div class="frctl-section__entry">
            <h2><span class="u-hover-drawline--thin">Draw Underline Thin</span></h2>
        </div>

        <div class="frctl-class-demo__text">Parent class: <code class="fractal-code frctl-class-demo__class-name">u-hover-drawline--parent</code>, child class: <code class="fractal-code frctl-class-demo__class-name">u-hover-drawline--child</code></div>
        <div class="frctl-section__entry">
            <div class="u-hover-drawline--parent">
                <p>Lorem ipsum dolor</p>
                <p>set emet</p>
                <p style="margin-top: 1rem"><span class="u-hover-drawline--child">Draw Underline on Parent hover</span></p>
            </div>
        </div>

        <div class="frctl-class-demo__text">Parent class: <code class="fractal-code frctl-class-demo__class-name">u-hover-drawline--parent--thin</code>, child class: <code class="fractal-code frctl-class-demo__class-name">u-hover-drawline--child</code></div>
        <div class="frctl-section__entry">
            <div class="u-hover-drawline--parent--thin">
                <p>Lorem ipsum dolor</p>
                <p>set emet</p>
                <p style="margin-top: 1rem"><span class="u-hover-drawline--child">Draw Underline on Parent hover</span></p>
            </div>
        </div>

        <div class="frctl-class-demo__text">Span class: <code class="fractal-code frctl-class-demo__class-name">u-hover-drawline--reverse</code></div>
        <div class="frctl-section__entry">
            <h2><span class="u-hover-drawline--reverse">Remove Underline</span></h2>
        </div>
    </div>
</div>

<div class="frctl-section frctl-class-demo frctl-class-demo--group">

    <p style="margin-bottom: 2.4rem;">Image Hover Styles</p>
    <p class="f-text--small" style="margin-bottom: 2.4rem;">Elements that wrap images need to be set to <code>overflow: hidden</code></p>
    <div style="padding: 0 2.4rem;">

        <div class="frctl-class-demo__text">Parent class: <code class="fractal-code frctl-class-demo__class-name">u-hover-grow-image</code></div>
        <div class="frctl-section__entry">
            <div class="u-hover-grow-image" style="overflow: hidden; max-width: 40rem;">
                <img src="images/journal/dino-on-truck.png" alt="">
            </div>
        </div>
    </div>
</div>