Created
March 4, 2020 14:17
-
-
Save martinctc/abcfa45b315b963152a10389e8e71bf6 to your computer and use it in GitHub Desktop.
[Card Hover Flip Effect] #HTML #CSS #JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> | |
| </head> | |
| <style> | |
| body { | |
| background: #000; | |
| font-family: arial, san-serif; | |
| color: #fff; | |
| } | |
| .card { | |
| background: #333; | |
| margin: 20px 0 0; | |
| max-width: 640px; | |
| } | |
| .card-container { | |
| position: relative; | |
| height: 0; | |
| padding-bottom: 75%; | |
| } | |
| .card .front, | |
| .card .back { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| max-width: 640px; | |
| max-height: 480px; | |
| transform-style: preserve-3d; | |
| backface-visibility: hidden; | |
| transition: all .5s ease-out; | |
| } | |
| .card .front { | |
| transform: perspective(900px) rotateY(-180deg); | |
| } | |
| .card .back { | |
| width: 100%; | |
| background-color: #242424; | |
| color: #fff; | |
| transform: perspective(900px) rotateY(0deg); | |
| } | |
| .card.not-flipped .front { | |
| transform: perspective(900px) rotateY(0deg); | |
| } | |
| .card.not-flipped .back { | |
| background-color: #000; | |
| color: #000; | |
| transform: perspective(900px) rotateY(180deg); | |
| } | |
| .card .back h2 { | |
| padding: 60px 18px 6px; | |
| } | |
| .card .back p { | |
| padding: 0 18px; | |
| line-height: 22px; | |
| } | |
| .card .cancel-card { | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| display: block; | |
| font: 24px; | |
| color: #999; | |
| cursor: pointer; | |
| } | |
| .no-csstransforms3d .card.not-flipped .front { | |
| z-index: 10; | |
| } | |
| @media (max-width: 979px) { | |
| .card { | |
| margin: 20px 20px 0; | |
| } | |
| .card .back h2 { | |
| padding: 18px 18px 0; | |
| font-size: 18px; | |
| } | |
| .card .back p { | |
| font-size: 14px; | |
| line-height: 18px; | |
| } | |
| } | |
| @media (max-width: 479px) { | |
| .card .back h2 { | |
| padding: 14px 14px 0; | |
| font-size: 14px; | |
| } | |
| .card .back p { | |
| margin: .5em 0; | |
| padding: 0 14px; | |
| font-size: 12px; | |
| line-height: 14px; | |
| } | |
| } | |
| /* -- CSS Grid - Borrowed from Bootstrap -- */ | |
| img { | |
| max-width: 100%; | |
| vertical-align: middle; | |
| border: 0; | |
| -ms-interpolation-mode: bicubic; | |
| } | |
| .row { | |
| margin-left: -20px; | |
| } | |
| .row:before, | |
| .row:after { | |
| display: table; | |
| content: ""; | |
| } | |
| .row:after { | |
| clear: both; | |
| } | |
| .container { | |
| margin-right: auto; | |
| margin-left: auto; | |
| width: 940px; | |
| } | |
| .container:before, | |
| .container:after { | |
| display: table; | |
| content: ""; | |
| } | |
| .container:after { | |
| clear: both; | |
| } | |
| .span6 { | |
| float: left; | |
| margin-left: 20px; | |
| width: 460px; | |
| } | |
| @media (max-width: 767px) { | |
| .container { | |
| width: auto; | |
| } | |
| .span6 { | |
| float: none; | |
| display: block; | |
| width: auto; | |
| margin-left: 0; | |
| } | |
| .card { | |
| margin: 20px auto 0; | |
| } | |
| } | |
| @media (min-width: 768px) and (max-width: 979px) { | |
| .container { | |
| width: 724px; | |
| } | |
| .span6 { | |
| width: 352px; | |
| } | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script> | |
| var cardHeight; | |
| // Sets the height of the back of the card to match the image in front | |
| function setBackHeight() { | |
| cardHeight = $('.card .front img').height(); | |
| $('.card .back').height(cardHeight); | |
| } | |
| $(document).ready(function() { | |
| $('.card').addClass('not-flipped'); | |
| //Swap behavior of hover with click on touch devices | |
| if (Modernizr.touch){ | |
| $('.card .back').prepend('<div class="cancel-card">\X</div>'); | |
| $('.card.not-flipped').on('click', function() { | |
| $('.card').addClass('not-flipped'); | |
| $(this).removeClass('not-flipped'); | |
| }); | |
| $('.cancel-card').click( function(ev) { | |
| ev.stopPropagation(); | |
| $('.card').addClass('not-flipped'); | |
| }); | |
| } else { | |
| $('.card').hover(function() { | |
| $(this).toggleClass('not-flipped'); | |
| }); | |
| } | |
| }); | |
| $(window).load(function() { | |
| // On window change, recalculate the size of the box | |
| window.onresize = function(){ | |
| setBackHeight(); | |
| } | |
| setBackHeight(); | |
| }); | |
| </script> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="span6"> | |
| <div class="card"> | |
| <div class="card-container"> | |
| <div class="front"> | |
| <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> | |
| </div> | |
| <div class="back"> | |
| <h2>Some text on the back</h2> | |
| <p>Did you know catfish have tastebuds all over their body?</p> | |
| </div> | |
| </div> | |
| </div><!-- .card --> | |
| </div><!-- .span6 --> | |
| <div class="span6"> | |
| <div class="card"> | |
| <div class="card-container"> | |
| <div class="front"> | |
| <img src="http://steve.schrab.org/_cp-assets/fish-fry-flick/2.jpg" alt="" /> | |
| </div> | |
| <div class="back"> | |
| <h2>Some text on the back</h2> | |
| <p>Did you know a hippo's sweat is pink?</p> | |
| </div> | |
| </div> | |
| </div><!-- .card --> | |
| </div><!-- .span6 --> | |
| <div class="span6"> | |
| <div class="card"> | |
| <div class="card-container"> | |
| <div class="front"> | |
| <img src="http://steve.schrab.org/_cp-assets/fish-fry-flick/3.jpg" alt="" /> | |
| </div> | |
| <div class="back"> | |
| <h2>Some text on the back</h2> | |
| <p>Did you know when you kiss more than 200 million germs per second are exchanged between mouths?</p> | |
| </div> | |
| </div> | |
| </div><!-- .card --> | |
| </div><!-- .span6 --> | |
| <div class="span6"> | |
| <div class="card"> | |
| <div class="card-container"> | |
| <div class="front"> | |
| <img src="http://steve.schrab.org/_cp-assets/fish-fry-flick/4.jpg" alt="" /> | |
| </div> | |
| <div class="back"> | |
| <h2>Some text on the back</h2> | |
| <p>Did you know a squid has three hearts?</p> | |
| </div> | |
| </div> | |
| </div><!-- .card --> | |
| </div><!-- .span6 --> | |
| </div><!-- .row --> | |
| </div><!-- .container --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment