Tutorial
No Result
View All Result
Tutorial
No Result
View All Result
Tutorial
No Result
View All Result

CSS Hover Effects & Animations – Button, Card, Text & Image

Staff by Staff
July 27, 2020
in Uncategorized
0 0
0
0
SHARES
30
VIEWS
Share on FacebookShare on Twitter

1)https://codepen.io/qq7886/pen/yOggRj

<h1>Every Hover Effects</h1>
<h4>A collection of CSS hover effects</h4>

<div id="content">
  <div class="item e1">
    <img src="https://chenyiya.com/codepen/hover-effect-1.jpg">
    <div class="text1">
      <h3>Effect One</h3>
      <p>A picture description here.</p>
    </div>
  </div>
  <div class="item e2">
    <img src="https://chenyiya.com/codepen/hover-effect-2.jpg">
    <div class="text2">
      <h3>Effect Two</h3>
      <p>A picture description here</p>
    </div>
    <div class="line top"></div>
    <div class="line bottom"></div>
    <div class="line left"></div>
    <div class="line right"></div>
  </div>
  <div class="item e3">
    <img src="https://chenyiya.com/codepen/hover-effect-3.jpg">
    <div class="text3">
      <h3>Effect Three</h3>
      <p>A picture description here</p>
    </div>
  </div>
  <div class="item e4">
    <img src="https://chenyiya.com/codepen/hover-effect-4.jpg">
    <div id="e4bk"></div>
    <div class="text4">
      <h3>Effect Four</h3>
      <div class="line middle"></div>
      <p>A picture description here</p>
    </div>
  </div>
  <div class="item e5">
    <img src="https://chenyiya.com/codepen/hover-effect-5.jpg">
    <div id="e5bk"></div>
    <div class="text5">
      <h3>Effect Five</h3>
      <p>A picture description here</p>
    </div>
    <div class="line inside"></div>
  </div>
  <div class="item e6">
    <img src="https://chenyiya.com/codepen/hover-effect-6.jpg">
    <div class="text6">
      <h3>Effect Six</h3>
      <p>A picture description here</p>
    </div>
  </div>
</div>
<h4>Photo from <a href="https://unsplash.com/"> Unsplash</a>.</h4>

2)https://codepen.io/ZaynAlaoudi/pen/xrgReO

<header>
  <div class='container'>
    <h1>CSS HOVER EFFECTS</h1>
    <p>CSS &amp; bits of JS</p>
  </div>
</header>
<div class='container'>
  <ul>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
    <li>
      <a class='normal' href='#'>
        <svg viewBox='0 0 80 76' x='0px' y='0px'>
          <g>
            <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'></path>
          </g>
        </svg>
      </a>
      <div class='info'>
        <h3>Single-origin coffee whatever</h3>
        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
      </div>
    </li>
  </ul>
</div>

<!-- FOLLOW -->
<a class="Follow" href="https://codepen.io/ZaynAlaoudi/" target="blank_"></a>
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

.container {
  width: auto !important;
}
li {
  -webkit-perspective: 360px;
          perspective: 360px;
}

.info {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
  background-color: rgba(225, 70, 225, 0.9);
}

.in-top .info {
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
          animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .info {
  -webkit-transform-origin: 100% 0%;
      -ms-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
          animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .info {
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
          animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .info {
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
          animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .info {
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
          animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .info {
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
          animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .info {
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
          animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .info {
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
          animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
/* you can ignore this ones */
ul {
    margin: 0 auto;
    padding: 0;
    width: 575px;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}

li {
  position: relative;
  float: left;
  width: 180px;
  height: 180px;
  margin: 5px;
  padding: 0;
  list-style: none;
}
li a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}
li h3 {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
li p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
li .normal {
  width: 100%;
  height: 100%;
  background-color: #fa3380;
  color: rgba(52, 73, 94, 0.6);
  box-shadow: inset 0 2px 20px #fa3380;
  text-align: center;
  font-size: 50px;
  line-height: 200px;
}
li .normal svg {
  pointer-events: none;
  width: 50px;
}
li .normal svg path {
  fill: rgba(52, 73, 94, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
}

h1 {
  margin: 0 auto 5px;
  text-align: center;
}

h3 {
  font-family: 'Bree Serif', serif;
}

.container {
  width: 840px;
  margin: 0 auto;
}

header {
  font-family: 'Bree Serif', serif;
  text-align: center;
  margin: 50px 0 25px;
  color: #fa3380;
}
header p {
  margin: 0;
  color: rgba(52, 73, 94, 0.4);
}


/*  FOLLOW*/
.Follow {	  background:url("https://pbs.twimg.com/profile_images/959092900708544512/v4Db9QRv_bigger.jpg")no-repeat center / contain;
	width: 50px;
	height: 50px;
	bottom: 9px;
	right: 20px;
	display:block;
	position:fixed;
	border-radius:50%;
	z-index:999;
	animation:  rotation 10s infinite linear;
	}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}







var nodes  = document.querySelectorAll('li'),
    _nodes = [].slice.call(nodes, 0);

var getDirection = function (ev, obj) {
    var w = obj.offsetWidth,
        h = obj.offsetHeight,
        x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
        y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
        d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
  
    return d;
};

var addClass = function ( ev, obj, state ) {
    var direction = getDirection( ev, obj ),
        class_suffix = "";
    
    obj.className = "";
    
    switch ( direction ) {
        case 0 : class_suffix = '-top';    break;
        case 1 : class_suffix = '-right';  break;
        case 2 : class_suffix = '-bottom'; break;
        case 3 : class_suffix = '-left';   break;
    }
    
    obj.classList.add( state + class_suffix );
};

// bind events
_nodes.forEach(function (el) {
    el.addEventListener('mouseover', function (ev) {
        addClass( ev, this, 'in' );
    }, false);

    el.addEventListener('mouseout', function (ev) {
        addClass( ev, this, 'out' );
    }, false);
});

3)https://codepen.io/mdbootstrap/pen/aVOBNX

<body class="hm-gradient">
    
    <main>
        
        <!--MDB Hover Effects-->
        <div class="container mt-4">

            <div class="text-center darken-grey-text mb-4">
                <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1>
                <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a>
            </div>
            
            <!-- Grid row -->
            <div class="row pb-3">
            
                <!-- Grid column -->
                <div class="col-lg-4 col-md-12 mb-4">
            
                    <div class="view overlay hm-black-strong">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img (1).jpg" class="img-fluid" alt="sample image">
                        <div class="mask flex-center">
                            <p class="white-text">Strong overlay</p>
                        </div>
                    </div>
            
                </div>
                <!-- Grid column -->
            
                <!-- Grid column -->
                <div class="col-lg-4 col-md-6 mb-4">
            
                    <div class="view overlay hm-white-light">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img (133).jpg" class="img-fluid" alt="sample image">
                        <div class="mask flex-center">
                            <p class="white-text">Light overlay</p>
                        </div>
                    </div>
            
                </div>
                <!-- Grid column -->
            
                <!-- Grid column -->
                <div class="col-lg-4 col-md-6 mb-4">
            
                    <div class="view overlay hm-yellow-slight">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img (110).jpg" class="img-fluid" alt="sample image">
                        <div class="mask flex-center">
                            <p class="white-text">Super light overlay</p>
                        </div>
                    </div>
            
                </div>
                <!-- Grid column -->
            
            </div>
            <!-- Grid row -->

            <!-- Grid row -->
            <div class="row">
            
                <!-- Grid column -->
                <div class="col-md-6 mb-4">
            
                    <div class="view overlay hm-zoom">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img (119).jpg" class="img-fluid" alt="sample image">
                        <div class="mask flex-center">
                            <p class="white-text">Zoom effect</p>
                        </div>
                    </div>
            
                </div>
                <!-- Grid column -->
            
                <!-- Grid column -->
                <div class="col-md-6 mb-4">
            
                    <div class="view overlay hoverable">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img (112).jpg" class="img-fluid" alt="sample image">
                        <div class="mask flex-center">
                            <p class="white-text">Shadow effect</p>
                        </div>
                    </div>
            
                </div>
                <!-- Grid column -->
            
            </div>
            <!-- Grid row -->
          
            <hr class="my-4">
          
            <div class="text-center darken-grey-text mb-4">
                <h3 class="font-bold mb-3">Here you can find more Hover Effects:</h3>
                <a class="btn btn-danger" href="https://mdbootstrap.com/css/hover-effects/" target="_blank">Bootstrap Hover Effects</a>
            </div>

        </div>
        <!--MDB Hover Effects-->
      
    </main>
  
</body>
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: #2E2E2E;
}

4)https://codepen.io/falloutgirl/pen/NrrVvz

<div class=container>
  <div class="effect1">
    <img src="https://d2sexymrhewzz1.cloudfront.net/sites/default/files/styles/small/public/2018-04/London_600x600.jpg">
  </div>
  <div class="effect2">
    <img src="https://pbs.twimg.com/media/CiGFoffXIAEMgdV.jpg">
  </div>
    <div class="effect3">
    <img src="http://blog.camilomunar.com/wp-content/gallery/spain-16/1118g4a0365.jpg">
    </div>
  <div class="effect4">
    <img src="https://media.gettingpersonal.co.uk/109134/images/products/48/8048/fullsize_c.jpg">
    <a href="#">Emirates</a>
  </div>
  <div class="effect5">
    <img src="https://pbs.twimg.com/media/CFkJ1o3UEAA8FQI.jpg">
    <a href="#">Parc des Princes</a>
  </div>
    <div class="effect6">
    <img src="http://static.lexpress.fr/medias_10675/w_1000,h_1000,c_fill,g_north/v1447845559/le-stade-santiago-bernabeu-a-madrid-en-2013_5465604.jpg">
    <a href="#">Santiago Bernabeu</a>
  </div>
  <div class="effect7">
    <img src="http://r-ec.bstatic.com/data/explorer_city/max800/457/4572.jpg">
    <a href="#">Learn more</a>
  </div>
  <div class="effect8">
    <img src="https://fastly.4sqi.net/img/general/600x600/21381669_c1x9Bxs_mMHPf-3dbjAOUaopYn9632YXgmP9XsIt3l4.jpg">
    <a href="#">[Learn more]</a>
  </div>
    <div class="effect9">
    <img src="https://www.yha.org.uk/sites/default/files/uploads/Places%20to%20Stay/Manchester/manchester.jpg">
    <a href="#">Learn more</a>
  </div>
  <div class="effect10">
    <img src="https://s3-eu-west-1.amazonaws.com/prez-shared-data/Images/7160.jpg">
    <a href="#">Old Trafford</a>
  </div>
  <div class="effect11">
    <img src="https://pbs.twimg.com/profile_images/842531341698662400/zA3PfNl0_400x400.jpg">
    <a href="#">Stade Louis II</a>
  </div>
    <div class="effect12">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/ef/5a/24/ef5a243228570d53d7e5dea9aa3c1dc3.jpg">
    <a href="#">Camp Nou</a>
  </div>
</div>
html {
  margin: 0;
}
body {
  margin: 0;
  background-color: #afff;  
}
.container {
  width: 945px;
  margin: 0 auto;
  position: relative;
}
/********************** Effect 1 *************************/
.effect1 img{
 width: 100%;
 max-width: 300px;
}
  .effect1 {
 position: relative;
 float: left;
 display: inline-block;
 margin-right: 1.5%;
}
.effect1:before {
  content: '';
  left: 50%;
  position: absolute;
  margin-left: -215px;
  width: 100%;
  height: 99%;
  transition: 0.4s EASE ALL;
  }
.effect1:hover:before {
  content: '';
  background: #000;  
  transform: scale(1);
  opacity: 0.6;
  text-align: center;
  color: #fff;
  font-size: 25px;
  left: 50%;
  position: absolute;
  margin-left: -150px;
  background-image: url(http://a.dryicons.com/images/icon_sets/luna_grey_icons/png/128x128/zoom.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
 }
/********************** Effect 2 *************************/
.effect2 img{
 width: 100%;
 max-width: 300px;
}
.effect2  {
   position: relative;
   display: inline-block;
   margin-right: 1%;
}
.effect2:before {
  content: '';
  left: 50%;
  position: absolute;
  margin-bottom: -215px;
  width: 100%;
  height: 99%;
  transition: 0.4s EASE ALL;
  }
.effect2:hover:before {
  content: '';
  background: #000;  
  transform: scale(1);
  opacity: 0.6;
  text-align: center;
  color: #fff;
  font-size: 25px;
  left: 50%;
  position: absolute;
  margin-left: -150px;
  background-image: url(http://a.dryicons.com/images/icon_sets/luna_grey_icons/png/128x128/zoom.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
 }
/********************** Effect 3 *************************/
.effect3 img{
   width: 100%;
   max-width: 300px;
}
.effect3 {
   position: relative;
   display: inline-block;
}
.effect3:before {
   content: '';
   left: 50%;
   left: 50%;
   position: absolute;
   margin-left: -150px;
   transform: scale(0.3);
   width: 100%;
   height: 99%;
   background-repeat: no-repeat;
   background-position: center;
   transition: 0.4s EASE ALL;
  }
.effect3:hover:before {
   content: '';
   background: #000;  
   transform: scale(1);
   opacity: 0.6;
   text-align: center;
   color: #fff;
   font-size: 25px;
   margin-top: 0;
   background-image: url(http://a.dryicons.com/images/icon_sets/luna_grey_icons/png/128x128/zoom.png);
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
 }
/********************** Effect 4 *************************/
.effect4 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
}
.effect4 img {
	max-width: 100%
}
.effect4 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 40px;
  height: 0px;
  position: absolute;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  top:0;
}	
.effect4:hover a {
  background-color: rgba(200,10,10,0.4);
  visibility: visible;
  height: 20%;
  padding: 40% 0; 
  opacity: 1;
}
/********************** Effect 5 *************************/
.effect5 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
}
.effect5 img {
	max-width: 100%
}
.effect5 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 40px;
  height: 0px;
  position: absolute;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  bottom: 3px;
}	
.effect5:hover a {
  background-color: rgba(100,0,120,0.4);
  visibility: visible;
  height: 16%;
  padding: 42% 0; 
  opacity: 1;
}
/********************** Effect 6 *************************/
.effect6 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
}
.effect6 img {
	max-width: 100%
}
.effect6 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 40px;
  height: 0px;
  position: absolute;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  bottom: 150px;
  transform: scale(0.3)
}	
.effect6:hover a {
  background-color: rgba(20,20,100,0.4);
  visibility: visible;
  height: 40%;
  padding: 30% 0; 
  opacity: 1;
  bottom: 3px;
  transform: scale(1);
}
/********************** Effect 7 *************************/
.effect7 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
}
.effect7 img {
	max-width: 100%
}
.effect7 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 40px;
  height: 0px;
  position: absolute;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  bottom: 150px;
  transform: scale(0.3);
  transform: rotate(-180deg);
}	
.effect7:hover a {
  background-color: rgba(190,120,130,1);
  visibility: visible;
  height: 20%;
  padding: 40.1% 0; 
  opacity: 1;
  bottom: 3px;
  transform: scale(1);
  transform: rotate(0deg);
  text-decoration: overline underline;
}
/********************** Effect 8 *************************/
.effect8 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
}
.effect8 img {
	max-width: 100%
}
.effect8 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 40px;
  height: 0px;
  position: absolute;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  bottom: 150px;
  transform: scale(0.3);
  transform: rotate(180deg);
}	
.effect8:hover a {
  background-color: rgba(240,160,140,1);
  visibility: visible;
  height: 20%;
  padding: 40.1% 0; 
  opacity: 1;
  bottom: 3px;
  transform: scale(1);
  transform: rotate(0deg);

}
/********************** Effect 9 *************************/
.effect9 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
}
.effect9 img {
	max-width: 100%
}
.effect9 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  text-align: center;
  font-size: 40px;
  height: 0px;
  position: absolute;
  left: 0;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  bottom: 150px;
  transform: scale(0.3);
  transform: rotate(-720deg);
}	
.effect9:hover a {
  background-color: rgba(120,160,230,1);
  visibility: visible;
  height: 20%;
  padding: 40.1% 0; 
  opacity: 1;
  bottom: 3px;
  transform: scale(1);
  transform: rotate(0deg);
}
/********************** Effect 10 *************************/
.effect10 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
  overflow: hidden;
}
.effect10 img {
  transform: scale(1.5);
	max-width: 100%;
  transition: 0.5s ease all;
}
.effect10 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  text-align: center;
  left: 0;
  font-size: 40px;
  height: 0px;
  position: absolute;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  bottom: 150px;
  transform: scale(0.3);
}	
.effect10:hover a {
  background: rgba(0,0,0,0.2);
  visibility: visible;
  height: 20%;
  padding: 40.1% 0; 
  opacity: 1;
  bottom: 3px;
  transform: scale(1);
  text-shadow: 
		-0   -1px 1px #000000,
		 0   -1px 1px #000000,
		-0    1px 1px #000000,
		 0    1px 1px #000000,
		-1px -0   1px #000000,
		 1px -0   1px #000000,
		-1px  0   1px #000000,
		 1px  0   1px #000000,
		-1px -1px 1px #000000,
		 1px -1px 1px #000000,
		-1px  1px 1px #000000,
		 1px  1px 1px #000000,
		-1px -1px 1px #000000,
		 1px -1px 1px #000000,
		-1px  1px 1px #000000,
		 1px  1px 1px #000000;
}
.effect10:hover img {
  transform: scale(1);
}
/********************** Effect 11 *************************/
.effect11 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
  overflow: hidden;
}
.effect11 img {
  transform: scale(1);
	max-width: 100%;
  transition: 0.5s ease all;
}
.effect11 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  text-align: center;
  font-size: 40px;
  height: 0px;
  position: absolute;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  bottom: 150px;
  transform: scale(0.3);
}	
.effect11:hover a {
  background: rgba(0,0,0,0.2);
  visibility: visible;
  left: 0;
  height: 20%;
  padding: 40.1% 0; 
  opacity: 1;
  bottom: 3px;
  transform: scale(1);
  text-shadow: 
		-0   -1px 1px #000000,
		 0   -1px 1px #000000,
		-0    1px 1px #000000,
		 0    1px 1px #000000,
		-1px -0   1px #000000,
		 1px -0   1px #000000,
		-1px  0   1px #000000,
		 1px  0   1px #000000,
		-1px -1px 1px #000000,
		 1px -1px 1px #000000,
		-1px  1px 1px #000000,
		 1px  1px 1px #000000,
		-1px -1px 1px #000000,
		 1px -1px 1px #000000,
		-1px  1px 1px #000000,
		 1px  1px 1px #000000;
}
.effect11:hover img {
  transform: scale(1.5);
}
/********************** Effect 12 *************************/
.effect12 {
	float: left;
	display: inline-block;
	width: 100%;
  max-width: 300px;
	margin-right: 1.5%;
	position: relative;
	cursor: pointer;
  overflow: hidden;
}
.effect12 img {
  transform: scale(1);
	max-width: 100%;
  transition: 0.5s ease all;
  transform: rotate(-360deg);
}
.effect12 a {
	text-decoration: none;
  color: #fff;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 40px;
  height: 0px;
  position: absolute;
  transition: 0.5s ease all;
	visibility: hidden;
	opacity: 0;
  bottom: 150px;
  transform: scale(0.3);
}	
.effect12:hover a {
  background: rgba(0,0,0,0.2);
  visibility: visible;
  height: 20%;
  padding: 40.1% 0; 
  opacity: 1;
  bottom: 3px;
  transform: scale(1);
  text-shadow: 
		-0   -1px 1px #000000,
		 0   -1px 1px #000000,
		-0    1px 1px #000000,
		 0    1px 1px #000000,
		-1px -0   1px #000000,
		 1px -0   1px #000000,
		-1px  0   1px #000000,
		 1px  0   1px #000000,
		-1px -1px 1px #000000,
		 1px -1px 1px #000000,
		-1px  1px 1px #000000,
		 1px  1px 1px #000000,
		-1px -1px 1px #000000,
		 1px -1px 1px #000000,
		-1px  1px 1px #000000,
		 1px  1px 1px #000000;
}
.effect12:hover img {
  transform: scale(1.5);
  transform: rotate(0deg);
}

5)https://codepen.io/tobiasglaus/pen/wxepwv

<div id="container">
  
  <div class="item">
    <div class="content">
      <h2>Images</h2>
    </div>
    
    <div class="previews">
      <div class="preview-image">
        <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg">
      </div>
      <div class="preview-image">
        <img src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg">
      </div>
      <div class="preview-image">
        <img src="http://thirtyoneseventyfive.com/wp-content/uploads/2018/07/archaicawful-landscape-photo-ideas-design-garden-creative-landscapes-contest-viewbug.jpg">
      </div>
      <div class="preview-image">
        <img src="https://cdn.fstoppers.com/styles/large/s3/lead/2018/07/take_better_shots_with_your_drone_landscape_photos.jpg">
      </div>
      <div class="preview-image">
        <img src="https://d31fr2pwly4c4s.cloudfront.net/8/6/c/1080632_0_landscape-photography_400.jpg">
      </div>
    </div>
  </div>
  
  <div class="item">
    <div class="content">
      <h2>Videos</h2>
    </div>
    
    <div class="previews">
      <div class="preview-image">
        <img src="https://cdn.mos.cms.futurecdn.net/raYa9qNMVG8wDY4L3qp9c8.jpg">
      </div>
      <div class="preview-image">
        <img src="https://www.popphoto.com/sites/popphoto.com/files/styles/1000_1x_/public/images/2018/07/00-otherworldly-national-park.jpg?itok=1bxhktRC&fc=50,50">
      </div>
      <div class="preview-image">
        <img src="https://www.adorama.com/alc/wp-content/uploads/2016/07/americanwest-mezz-1024x576.jpg">
      </div>
      <div class="preview-image">
        <img src="https://www.nationalgeographic.com/content/dam/photography/photos/000/675/67547.ngsversion.1467941445762.adapt.1900.1.jpg">
      </div>
      <div class="preview-image">
        <img src="https://i2.wp.com/fotogr8.com/wp-content/uploads/2016/08/jeffrey-swanson-landscape-photographer.jpg?resize=600%2C397&ssl=1">
      </div>
    </div>
  </div>
    
  </div>
</div>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

$grey1:#e8e8ee;
$grey2:#9497aa;
$grey3:#5a5863;
$brown:#ab816b;
$blue:#1a7fa8;

body{
  height:100vh;
  background:linear-gradient(to top, #09203f 0%, #537895 100%);
}

@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));

  @return $randomNum;
  /* e.g. font-size: #{randomNum(5, 10)}px; */
}

#container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100%;
  padding:0 20%;
  
  @media (max-width:968px){
    flex-wrap:wrap;
  }
  
  .item{
    position:relative;
    width:240px;
    height:240px;
    cursor:pointer;
    z-index:0;
    margin:20px;
    
    @media (max-width:968px){
      width:100%;
    }
        
    .content{
      height:100%;
      width:100%;
      border:2px solid $grey1;
      display:flex;
      align-items:flex-end;
      padding:10px 15px;
      border-radius:4px;
      background:#fff;
      transform:rotate(0) scale(1);
      transition:all .2s cubic-bezier(.28,.05,.65,.97);
      box-shadow:0 0 0 0 rgba(0,0,0,0.3);
      
      h2{
        font-weight:600;
        color:$grey3;
        transition:all .3s cubic-bezier(.28,.05,.65,.97);
      }
      
      &:after{
        position:absolute;
        bottom:-2px;
        right:-2px;
        content:"";
        width:calc(100% + 4px);
        height:4px;
        background:$blue;
        border-radius:0 0 4px 4px;
        transition:all .3s cubic-bezier(.28,.05,.65,.97);
      }
    }
    
    .previews{
      position:relative;
      bottom:0;
      left:0;
      z-index:-1;
      
      &:nth-child(2){
        .preview-image{
          right:0;
        }
      }
      
      .preview-image{
        width:160px;
        height:110px;
        transition:all .2s cubic-bezier(.28,.05,.65,.97);
        position:absolute;
        bottom:10px;
        left:0;
        overflow:hidden;
        border-radius:4px;
        box-shadow:0 0 0 0 rgba(0,0,0,0.3);
        
        img{
          width:140%;
        }
      }
    }
    
    &:hover{
      z-index:5;
      
      .content{
        background:$grey3;
        border:2px solid $grey3;
        transform:rotate(0) scale(1.2);
        animation:shake .4s 1;
        animation-delay:.4s;
        box-shadow:-27px 18px 80px 0 rgba(0,0,0,0.3);
        transition:all .3s cubic-bezier(.28,.05,.65,.97);
        
        &:after{
          width:0;
          transition:all .3s cubic-bezier(.28,.05,.65,.97);
        }
        
        h2{
          color:$grey1;
          transition:all .3s cubic-bezier(.28,.05,.65,.97);
        }
      }

      .previews{
        .preview-image{
          transition:all .2s cubic-bezier(.28,.05,.65,.97);
          box-shadow:-8px 5px 30px 0 rgba(0,0,0,0.2);
          
          &:nth-child(1){
            transform:rotate(#{randomNum(-10, 10)}deg) translate(-150px, -100px);
            transition-delay:.4s;
          }
          &:nth-child(2){
            transform:rotate(#{randomNum(-10, 10)}deg) translate(-120px, 0);
            transition-delay:.45s;
          }
          &:nth-child(3){
            transform:rotate(#{randomNum(-10, 10)}deg) translate(-40px, 100px);
            transition-delay:.55s;
          }
          &:nth-child(4){
            transform:rotate(#{randomNum(-10, 10)}deg) translate(130px, 70px);
            transition-delay:.5s;
          }
          &:nth-child(5){
            transform:rotate(#{randomNum(-10, 10)}deg) translate(180px, -40px);
            transition-delay:.6s;
          }
        }
      }
    }
    
    @keyframes shake{
      0%{ transform:rotate(3deg) scale(1.2) }
      20%{ transform:rotate(-3deg) scale(1.2) }
      40%{ transform:rotate(3deg) scale(1.2) }
      60%{ transform:rotate(-3deg) scale(1.2) }
      80%{ transform:rotate(3deg) scale(1.2) }
      100%{ transform:rotate(0) scale(1.2) }
    }
  }
}

6)https://codepen.io/SRHubli/pen/BqQBWO

<body>
  <div class="container shoe">
    <div class="productImage shoeImg"></div>
    <div class="size shoeSize">
      <h4>SIZE</h4>
      <ul>
        <li>9</li>
        <li>8</li>
        <li>7</li>
      </ul>
    </div>
    <div class="price shoePrice">
      <h4>PRICE</h4>
      <span>$150</span>
    </div>
    <div class="color shoeColor">
      <h4>COLORS</h4>
      <ul>
        <li><span class="blue"></span></li>
        <li><span class="yellow"></span></li>
        <li><span class="red"></span></li>
      </ul>
    </div>
    <div class="productName shoeName">
      Nike Air Max
    </div>
  </div>
  <div class="container shirt">
    <div class="productImage shirtImg"></div>
    <div class="size shirtSize">
      <h4>SIZE</h4>
      <ul>
        <li>S</li>
        <li>M</li>
        <li>L</li>
      </ul>
    </div>
    <div class="price shirtPrice">
      <h4>PRICE</h4>
      <span>$50</span>
    </div>
    <div class="color shirtColor">
      <h4>COLORS</h4>
      <ul>
        <li><span class="blue"></span></li>
        <li><span class="yellow"></span></li>
        <li><span class="red"></span></li>
      </ul>
    </div>
    <div class="productName shirtName">
      Crew-neck t-shirt
    </div>
  </div>
  <div class="credits">
        Based on a<a target="_blank" href="https://dribbble.com/shots/4894403-Product-info-hover"> Dribbble Shot</a>
    </div>
</body>
:root {
  --size: 400px;
  --blue: #aad5ff;
  --lb: rgba(0, 0, 0, 0.5);
}
body {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  background-color: var(--blue);
  color: cornsilk;
  font-family: "Roboto Condensed", sans-serif;
}
.container {
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: center;
  align-items: center;
  filter: drop-shadow(0px 0px 7px rgba(1, 1, 1, .7));
}
.productImage {
  grid-column: 1/span 2;
  grid-row: 1 /span 2;
  width: var(--size);
  height: var(--size);
  background-size: cover;
  clip-path: polygon(
    20% 20%,
    50% 20%,
    50% 20%,
    80% 20%,
    80% 50%,
    80% 50%,
    80% 80%,
    50% 80%,
    50% 80%,
    20% 80%,
    20% 50%,
    20% 50%
  );
  transition: all 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.shoeImg {
  background-image: url(https://source.unsplash.com/l8p1aWZqHvE/1000x1000);
  background-color: #148bff;
}
.shirtImg {
  background-image: url(https://source.unsplash.com/49wtmkUVmFQ/1000x1000);
  background-color: #aace29;
}
h4,
ul,
span {
  padding: 0;
  margin: 0;
}
.size,
.color {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  z-index: 1;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.size ul li,
.color ul li {
  list-style: none;
  width: 20px;
  height: 20px;
  margin: 5px;
  padding: 5px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.color {
  grid-column: 2;
  grid-row: 2;
}
.color ul li span {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  display: inline-block;
}
.red {
  background-color: red;
}
.yellow {
  background-color: greenyellow;
}
.blue {
  background-color: #0070ee;
}
.price {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 1;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.price h4 {
  margin-bottom: 8px;
}
.price span {
  width: 20px;
  height: 20px;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.5);
}
.productName {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  z-index: 1;
  transition: all 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.productImage:hover {
  clip-path: polygon(
    20% 0%,
    50% 0%,
    50% 20%,
    100% 20%,
    100% 50%,
    80% 50%,
    80% 100%,
    50% 100%,
    50% 80%,
    0% 80%,
    0% 50%,
    20% 50%
  );
  transform: rotate(-15deg);
  transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.productImage:hover ~ * {
  opacity: 1;
  transform: rotate(-15deg);
  transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.credits{
    color:white;
    font-size: 1.2rem;
    grid-column: 1 / -1 ;
    justify-self: center;
    text-align: center;
}
//Design Inspiration:
// https://dribbble.com/shots/4894403-Product-info-hover

7)https://codepen.io/sfoxy/pen/XpOoJe

<div class="button_container">
	<p class="description">A simple pure CSS hover effect</p>
	<button class="btn"><span>Hover me!</span></button>
  <!--<p class="link">
    Design by 
    <a href="https://dribbble.com/skytrip" target="_blank">SkyTrip</a>
  </p>-->
</div>
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body {
	margin: 0;
	height: 100%;
	background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
	background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.button_container {
	position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}

.description, .link {
  font-family: 'Amatic SC', cursive;
  text-align: center;
}

.description {
	font-size: 35px;
}

.btn {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background-color: #222;
  padding: 17px 60px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.btn span {
  position: relative; 
  z-index: 1;
}

.btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: #78c7d2;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.link {
  font-size: 20px;
  margin-top: 30px;
}

.link a {
  color: #000;
  font-size: 25px; 
}

8)https://codepen.io/shshaw/pen/akXzzE

<div class="panels">
<div class="panels__container">
  <a href="#" class="panel">
    <div class="panel__content" style="background-image: url(https://unsplash.it/1000/1100/?image=786);">
    <h3 class="panel__title">EXPLORE</h3>
    </div>
  </a>
  <a href="#" class="panel">
    <div class="panel__content" style="background-image: url(https://unsplash.it/1000/1100/?image=883)">
    <h3 class="panel__title">DISCOVER</h3>
    </div>
  </a>
</div>
</div>
@duration: 1s;
@ease: cubic-bezier(.6,.0,.2,1);

@offsetSize: 10%;
@contentOffset: @offsetSize * 1.4;
/* @offsetSize * 2 means the content won't appear to move at all. Set to a lower value for squishing effects. */

@textColor: #FFF;
@overlayColor: #000;
@highlightColor: #FFC12D;
@borderColor: @highlightColor;

/*////////////////////////////////////////*/
/* Layout */

.panels {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: @overlayColor;
  pointer-events: none;
}

.panels__container {
  display: flex;
  justify-content: center;
  align-items: stretch; 
  
  height: 100%;
  width: unit( 100 + (@offsetSize * 2),%);
  margin: 0 -(@offsetSize);
  visibility: hidden; 
}

.panel {
  display: inline-block;
  height: 100%;
  visibility: visible;
  position: relative; 
  overflow: hidden;
  flex: 1;
  cursor: pointer;
  text-decoration: none;
}

/*////////////////////////////////////////*/
/* Image/Text Container */

.panel__content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: center center no-repeat;
  background-size: cover;
  
  &:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: @overlayColor;
    opacity: 0.5;
    transition: opacity @duration @ease;
  }
}

/*////////////////////////////////////////*/
/* Title */

.panel__title {
  pointer-events: auto;
  color: @textColor;
  position: relative;
  z-index: 1;
  transition: color @duration @ease;
  
  &:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: @overlayColor;
    background: fade(@overlayColor,70%);
    border: solid 2px @borderColor;
    z-index: -1;
    padding: 0.5em 1em;
    margin: -0.5em -1em;
    
    opacity: 0;
    transform: scale(0.9);
    transition: all @duration @ease;
    transition-property: opacity, transform;
  }
}

/*////////////////////////////////////////*/
/* Hover States */

.panel {
  transform: translate3d(0,0,0);
  transition: transform @duration @ease;
  
  .panel__content { 
    transform: translateX(@offsetSize);
    transition: transform @duration @ease;
  }
  
  &:last-child .panel__content {
    transform: translateX(-@offsetSize);
  }
  
  /* Inactive panel */
  .panels:hover & {
    transform: translate3d(-@offsetSize, 0, 0); 
      
    .panel__content { 
      transform: translateX(@contentOffset);             
      &:before { opacity: 0.7; }
    }
  }
  
  /* Override styles for an inactive panel AFTER the hovered panel */
  .panels &:hover ~ & { 
    transform: translate3d(@offsetSize, 0, 0);
    
    .panel__content { 
      transform: translateX(-@contentOffset);
    }
  }
  
  /* Active panel */
  .panels &:hover { 
    z-index: 2;
    transform: translate3d(@offsetSize,0,0);
    pointer-events: auto;
    
    &:last-child { transform: translate3d(-@offsetSize,0,0); }
    
    .panel__content { 
      transform: translateX(0%);
      &:before { opacity: 0; }
    }
    
    .panel__title {
      color: @highlightColor;

      &:before {
        opacity: 1;
        transform: scale(1);
      }
    }
  } 
}

/*////////////////////////////////////////*/
/* Vertical layout */

.panels--stacked {
  
  .panels__container {
    width: 100%;
    height: unit( 100 + (@offsetSize * 2),%);
    margin: -(@offsetSize) 0;
    flex-direction: column;
  }

  .panel {
    height: 50%;
    width: 100%;
    transform: translate3d(0, 0, 0);

    .panel__content {
      transform: translate3d(0, @offsetSize, 0);
    }

    &:last-child .panel__content {
      transform: translate3d(0, -@offsetSize,0);
    }
  }
  
    /* Inactive panel */
  &:hover .panel {
    transform: translate3d(0, -@offsetSize, 0);

    .panel__content {
      transform: translate3d(0, @contentOffset, 0);
    }
  }

  /* Override styles for an inactive panel AFTER the hovered panel */
  & .panel:hover ~ .panel {
    transform: translate3d(0, @offsetSize, 0);

    .panel__content {
      transform: translate3d(0, -@contentOffset, 0);
    }
  }

  /* Active panel */
  & .panel:hover {
    transform: translate3d(0, @offsetSize, 0);

    &:last-child { transform: translate3d(0, -@offsetSize, 0); }

    .panel__content {
      transform: translate3d(0, 0, 0);
    }
  }
}

/* Responsive */

@media (max-width: 550px) {
  .panels { .panels--stacked; }
}

/*////////////////////////////////////////*/
/* Specific Design Setup */

@import 'https://fonts.googleapis.com/css?family=Oswald';

.panel__title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 2.5em;
  letter-spacing: 0.1em;
  
  @media (max-width: 800px) {
    font-size: 1.5em;
  }
  @media (max-width: 600px) {
    font-size: 1.25em;
  }
}

html, body { height: 100%; }
/* Nothing here! */
Previous Post

CSS ripple effect Animation / On Button / Hover

Next Post

3 CSS Properties You Should Know

Staff

Staff

Next Post

3 CSS Properties You Should Know

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archives

  • December 2020
  • September 2020
  • August 2020
  • July 2020
  • January 2020

Categories

  • Coding
  • CSS
  • Design
  • HTML
  • News
  • Technology
  • Uncategorized

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
  • Activity
  • Become a Vendor
  • Cart
  • Cart
  • Checkout
  • Checkout
  • Compare
  • Contact
  • Dashboard
  • Home
  • Home Layout 1
  • Home Layout 2
  • Home Layout 3
  • Members
  • My account
  • My account
  • My Orders
  • Sample Page
  • Shop
  • Shop
  • Shopping Cart
  • Term & Conditions
  • Wishlist
  • Your Recently Viewed

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Activity
  • Become a Vendor
  • Cart
  • Cart
  • Checkout
  • Checkout
  • Compare
  • Contact
  • Dashboard
  • Home
  • Home Layout 1
  • Home Layout 2
  • Home Layout 3
  • Members
  • My account
  • My account
  • My Orders
  • Sample Page
  • Shop
  • Shop
  • Shopping Cart
  • Term & Conditions
  • Wishlist
  • Your Recently Viewed

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In