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! */