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>
<header> <div class='container'> <h1>CSS HOVER EFFECTS</h1> <p>CSS & 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! */