Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CSS Hover Animation Selector Before After</title>
- <style>
- .portrait {
- box-sizing: border-box;
- width: 350px;
- height: 450px;
- border: 2px solid red;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: rgba(128, 128, 128, 0.2);
- }
- .face {
- border-top: 30px solid red;
- box-sizing: border-box;
- width: 200px;
- border-radius: 50%;
- height: 300px;
- padding: 80px 0;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: black;
- }
- .face:before {
- box-sizing: border-box;
- content: "";
- width: 60px;
- height: 60px;
- border-radius: 50%;
- background-color: white;
- display: inline-block;
- transform: translate(5px, -20px);
- border-top: 15px solid red;
- }
- .portrait:hover .face:before {
- border-top: 60px solid red;
- transition: all 0.1s linear;
- }
- .portrait:hover .left_eye {
- z-index: -1;
- }
- .face:after {
- box-sizing: border-box;
- content: "";
- width: 60px;
- height: 60px;
- border-radius: 50%;
- background-color: white;
- display: inline-block;
- transform: translate(70px, -20px);
- border-top: 15px solid red;
- }
- .mouth {
- box-sizing: border-box;
- width: 90px;
- height: 80px;
- border-radius: 50%;
- background-color: transparent;
- display: inline-block;
- position: absolute;
- top: 150px;
- left: 55px;
- border-bottom: 15px solid white;
- }
- .left_eye {
- box-sizing: border-box;
- border: 15px solid;
- border-radius: 50%;
- display: inline-block;
- position: absolute;
- top: 80px;
- left: 25px;
- }
- .right_eye {
- box-sizing: border-box;
- border: 15px solid;
- border-radius: 50%;
- display: inline-block;
- position: absolute;
- top: 80px;
- left: 145px;
- z-index: 1;
- }
- .tube {
- position: absolute;
- top: 10px;
- left: 10px;
- text-decoration: none;
- background-color: red;
- width: 150px;
- text-align: center;
- color: snow;
- font-family: arial black;
- padding: 5px 20px;
- }
- </style>
- </head>
- <body>
- <div class='portrait'>
- <span class='face'>
- <span class='mouth'></span>
- <span class='left_eye'></span>
- <span class='right_eye'></span>
- </span>
- </div>
- <a class='tube' href='https://youtu.be/2vMDuLJIT7U'>See it on YouTube</a>
- <script></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement