Created
April 3, 2017 21:57
-
-
Save barbazzz/67e13c482ad7ecc59be3bea66889cdaa to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/pewiduf
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| /* @import "compass/css3"; */ | |
| /* @import "compass/css3/box-sizing"; */ | |
| /* @import "ceaser-easing"; */ | |
| body { | |
| padding-top: 70px; | |
| background: rgba(240, 252, 255, 0.8); | |
| } | |
| .wrap { | |
| margin: 0 auto; | |
| padding: 110px 0; | |
| width: 85%; | |
| background: #f0fcff; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); | |
| /* @include box-sizing(content-box); */ | |
| } | |
| .box { | |
| margin: auto; | |
| width: 150px; | |
| background-size: 150px; | |
| background-repeat: no-repeat; | |
| background-image: url(http://cdn.inquisitr.com/wp-content/uploads/2016/09/Pepe-the-frog-redrawn-670x670.jpg); | |
| background-position: center; | |
| } | |
| .mike { | |
| width: 100%; | |
| display: block; | |
| opacity: .7; | |
| transition: transform .6s ease-in-out; | |
| } | |
| .mike:hover { | |
| transform: rotate(2turn); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="box"> | |
| <img src="http://cdn.inquisitr.com/wp-content/uploads/2016/09/Pepe-the-frog-redrawn-670x670.jpg" alt="Pepe frog" class="mike"> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">/* @import "compass/css3"; */ | |
| /* @import "compass/css3/box-sizing"; */ | |
| /* @import "ceaser-easing"; */ | |
| body { | |
| padding-top: 70px; | |
| background: rgba(240, 252, 255, .8); | |
| } | |
| .wrap { | |
| margin: 0 auto; | |
| padding: 110px 0; | |
| width: 85%; | |
| background: #f0fcff; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, .8); | |
| /* @include box-sizing(content-box); */ | |
| } | |
| .box { | |
| margin: auto; | |
| width: 150px; | |
| background-size: 150px; | |
| background-repeat: no-repeat; | |
| background-image: url(http://cdn.inquisitr.com/wp-content/uploads/2016/09/Pepe-the-frog-redrawn-670x670.jpg); | |
| background-position: center; | |
| } | |
| .mike { | |
| width: 100%; | |
| display: block; | |
| opacity: .7; | |
| transition: transform .6s ease-in-out; | |
| &:hover { | |
| transform: rotate(2turn); | |
| } | |
| }</script> | |
| </body> | |
| </html> |
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
| /* @import "compass/css3"; */ | |
| /* @import "compass/css3/box-sizing"; */ | |
| /* @import "ceaser-easing"; */ | |
| body { | |
| padding-top: 70px; | |
| background: rgba(240, 252, 255, 0.8); | |
| } | |
| .wrap { | |
| margin: 0 auto; | |
| padding: 110px 0; | |
| width: 85%; | |
| background: #f0fcff; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); | |
| /* @include box-sizing(content-box); */ | |
| } | |
| .box { | |
| margin: auto; | |
| width: 150px; | |
| background-size: 150px; | |
| background-repeat: no-repeat; | |
| background-image: url(http://cdn.inquisitr.com/wp-content/uploads/2016/09/Pepe-the-frog-redrawn-670x670.jpg); | |
| background-position: center; | |
| } | |
| .mike { | |
| width: 100%; | |
| display: block; | |
| opacity: .7; | |
| transition: transform .6s ease-in-out; | |
| } | |
| .mike:hover { | |
| transform: rotate(2turn); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment