{{ enablePlugins('prettify') }}
{% set title = "Hover Effects" %}

{% extends "layouts/application.html" %}


{% block content %}
  {% include "shared/page-title.html" %}

  <div class="card-panel">
    Complete set of effects from this article <a href="http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/">http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/</a>.
  </div>

  <div class="card-panel">
    
    <div class="row mt-0">
      <div class="col l6 s12">
        <h4>Lily</h4>
        <figure class="hover-effect effect-lily">
          <img src="assets/_con/images/image-5.jpg" alt="image-5"/>
          <figcaption>
            <div>
              <h2>Nice <span>Lily</span></h2>
              <p>Lily likes to play with crayons and pencils</p>
            </div>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Sadie</h4>
        <figure class="hover-effect effect-sadie">
          <img src="assets/_con/images/image-6.jpg" alt="image-6"/>
          <figcaption>
            <h2>Holy <span>Sadie</span></h2>
            <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Honey</h4>
        <figure class="hover-effect effect-honey">
          <img src="assets/_con/images/image-4.jpg" alt="image-4"/>
          <figcaption>
            <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Layla</h4>
        <figure class="hover-effect effect-layla">
          <img src="assets/_con/images/image-7.jpg" alt="image-7"/>
          <figcaption>
            <h2>Crazy <span>Layla</span></h2>
            <p>When Layla appears, she brings an eternal summer along.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Zoe</h4>
        <figure class="hover-effect effect-zoe">
          <img src="assets/_con/images/image-8.jpg" alt="image-8"/>
          <figcaption>
            <h2>Creative <span>Zoe</span></h2>
            <p class="icon-links">
              <a href="#"><span class="fa fa-heart-o"></span></a>
              <a href="#"><span class="fa fa-eye"></span></a>
              <a href="#"><span class="fa fa-paperclip"></span></a>
            </p>
            <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Oscar</h4>
        <figure class="hover-effect effect-oscar">
          <img src="assets/_con/images/image-9.jpg" alt="image-9"/>
          <figcaption>
            <h2>Warm <span>Oscar</span></h2>
            <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Marley</h4>
        <figure class="hover-effect effect-marley">
          <img src="assets/_con/images/image-10.jpg" alt="image-10"/>
          <figcaption>
            <h2>Sweet <span>Marley</span></h2>
            <p>Marley tried to convince her but she was not interested.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Ruby</h4>
        <figure class="hover-effect effect-ruby">
          <img src="assets/_con/images/image-11.jpg" alt="image-11"/>
          <figcaption>
            <h2>Glowing <span>Ruby</span></h2>
            <p>Ruby did not need any help. Everybody knew that.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Roxy</h4>
        <figure class="hover-effect effect-roxy">
          <img src="assets/_con/images/image-12.jpg" alt="image-12"/>
          <figcaption>
            <h2>Charming <span>Roxy</span></h2>
            <p>Roxy was my best friend. She'd cross any border for me.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Bubba</h4>
        <figure class="hover-effect effect-bubba">
          <img src="assets/_con/images/image-4.jpg" alt="image-4"/>
          <figcaption>
            <h2>Fresh <span>Bubba</span></h2>
            <p>Bubba likes to appear out of thin air.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Romeo</h4>
        <figure class="hover-effect effect-romeo">
          <img src="assets/_con/images/image-5.jpg" alt="image-5"/>
          <figcaption>
            <h2>Wild <span>Romeo</span></h2>
            <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Dexter</h4>
        <figure class="hover-effect effect-dexter">
          <img src="assets/_con/images/image-6.jpg" alt="image-6"/>
          <figcaption>
            <h2>Strange <span>Dexter</span></h2>
            <p>Dexter had his own strange way. You could watch him training ants.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Sarah</h4>
        <figure class="hover-effect effect-sarah">
          <img src="assets/_con/images/image-7.jpg" alt="image-7"/>
          <figcaption>
            <h2>Free <span>Sarah</span></h2>
            <p>Sarah likes to watch clouds. She's quite depressed.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Chico</h4>
        <figure class="hover-effect effect-chico">
          <img src="assets/_con/images/image-8.jpg" alt="image-8"/>
          <figcaption>
            <h2>Silly <span>Chico</span></h2>
            <p>Chico's main fear was missing the morning bus.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Milo</h4>
        <figure class="hover-effect effect-milo">
          <img src="assets/_con/images/image-9.jpg" alt="image-9"/>
          <figcaption>
            <h2>Faithful <span>Milo</span></h2>
            <p>Milo went to the woods. He took a fun ride and never came back.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Julia</h4>
        <figure class="hover-effect effect-julia">
          <img src="assets/_con/images/image-10.jpg" alt="image-10"/>
          <figcaption>
            <h2>Passionate <span>Julia</span></h2>
            <div>
              <p>Julia dances in the deep dark</p>
              <br>
              <p>She loves the smell of the ocean</p>
              <br>
              <p>And dives into the morning light</p>
            </div>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Goliath</h4>
        <figure class="hover-effect effect-goliath">
          <img src="assets/_con/images/image-11.jpg" alt="image-11"/>
          <figcaption>
            <h2>Thoughtful <span>Goliath</span></h2>
            <p>When Goliath comes out, you should run.</p>
            <a href="#">View more</a>
          </figcaption>
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Hera</h4>
        <figure class="hover-effect effect-hera">
          <img src="assets/_con/images/image-12.jpg" alt="image-12"/>
          <figcaption>
            <h2>Tender <span>Hera</span></h2>
            <p>
              <a href="#"><i class="fa fa-fw fa-file-pdf-o"></i></a>
              <a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
              <a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
              <a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
            </p>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Winston</h4>
        <figure class="hover-effect effect-winston">
          <img src="assets/_con/images/image-4.jpg" alt="image-4"/>
          <figcaption>
            <h2>Jolly <span>Winston</span></h2>
            <p>
              <a href="#"><i class="fa fa-fw fa-star-o"></i></a>
              <a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
              <a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
            </p>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Selena</h4>
        <figure class="hover-effect effect-selena">
          <img src="assets/_con/images/image-6.jpg" alt="image-6"/>
          <figcaption>
            <h2>Happy <span>Selena</span></h2>
            <p>Selena is a tiny-winged bird.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Terry</h4>
        <figure class="hover-effect effect-terry">
          <img src="assets/_con/images/image-5.jpg" alt="image-5"/>
          <figcaption>
            <h2>Noisy <span>Terry</span></h2>
            <p>
              <a href="#"><i class="fa fa-fw fa-download"></i></a>
              <a href="#"><i class="fa fa-fw fa-heart"></i></a>
              <a href="#"><i class="fa fa-fw fa-share"></i></a>
              <a href="#"><i class="fa fa-fw fa-tags"></i></a>
            </p>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Phoebe</h4>
        <figure class="hover-effect effect-phoebe">
          <img src="assets/_con/images/image-7.jpg" alt="image-7"/>
          <figcaption>
            <h2>Plain <span>Phoebe</span></h2>
            <p>
              <a href="#"><i class="fa fa-fw fa-user"></i></a>
              <a href="#"><i class="fa fa-fw fa-heart"></i></a>
              <a href="#"><i class="fa fa-fw fa-cog"></i></a>
            </p>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Apollo</h4>
        <figure class="hover-effect effect-apollo">
          <img src="assets/_con/images/image-8.jpg" alt="image-8"/>
          <figcaption>
            <h2>Strong <span>Apollo</span></h2>
            <p>Apollo's last game of pool was so strange.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Kira</h4>
        <figure class="hover-effect effect-kira">
          <img src="assets/_con/images/image-9.jpg" alt="image-9"/>
          <figcaption>
            <h2>Dark <span>Kira</span></h2>
            <p>
              <a href="#"><i class="fa fa-fw fa-home"></i></a>
              <a href="#"><i class="fa fa-fw fa-download"></i></a>
              <a href="#"><i class="fa fa-fw fa-heart"></i></a>
              <a href="#"><i class="fa fa-fw fa-share"></i></a>
            </p>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Steve</h4>
        <figure class="hover-effect effect-steve">
          <img src="assets/_con/images/image-10.jpg" alt="image-10"/>
          <figcaption>
            <h2>Lonely <span>Steve</span></h2>
            <p>Steve was afraid of the Boogieman.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Moses</h4>
        <figure class="hover-effect effect-moses">
          <img src="assets/_con/images/image-11.jpg" alt="image-11"/>
          <figcaption>
            <h2>Cute <span>Moses</span></h2>
            <p>Moses loves to run after butterflies.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Jazz</h4>
        <figure class="hover-effect effect-jazz">
          <img src="assets/_con/images/image-12.jpg" alt="image-12"/>
          <figcaption>
            <h2>Dynamic <span>Jazz</span></h2>
            <p>When Jazz starts to chase cars, the whole world stands still.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Ming</h4>
        <figure class="hover-effect effect-ming">
          <img src="assets/_con/images/image-4.jpg" alt="image-4"/>
          <figcaption>
            <h2>Funny <span>Ming</span></h2>
            <p>Ming sits in the corner the whole day. She's into crochet.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>

    <div class="row">
      <div class="col l6 s12">
        <h4>Lexi</h4>
        <figure class="hover-effect effect-lexi">
          <img src="assets/_con/images/image-5.jpg" alt="image-5"/>
          <figcaption>
            <h2>Altruistic <span>Lexi</span></h2>
            <p>Each and every friend is special. Lexi won't hide a single cookie.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
      <div class="col l6 s12">
        <h4>Duke</h4>
        <figure class="hover-effect effect-duke">
          <img src="assets/_con/images/image-6.jpg" alt="image-6"/>
          <figcaption>
            <h2>Messy <span>Duke</span></h2>
            <p>Duke is very bored. When he looks at the sky, he feels to run.</p>
            <a href="#">View more</a>
          </figcaption>     
        </figure>
      </div>
    </div>
  </div>

{% endblock %}