Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- .container {
- margin: 100px auto;
- width: 600px;
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
- align-items: center;
- position: relative;
- }
- .elem1, .elem2 {
- background: #ccc;
- width: 110px;
- height: 110px;
- border: 1px solid #000;
- position: relative;
- }
- .elem1::before, .elem2::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: -2;
- transition: box-shadow 1s;
- box-shadow: 0px 0px 50px 10px #0f0;
- }
- .elem1:hover::before, .elem2:hover::before {
- z-index: -1;
- box-shadow: 0px 0px 100px 20px #f00;
- }
- .elem2 {
- transition: transform 0.5s;
- }
- .elem2:hover {
- transform: scale(1.5);
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="elem1"></div>
- <div class="elem1"></div>
- <div class="elem1"></div>
- <div class="elem1"></div>
- <div class="elem1"></div>
- </div>
- <div class="container">
- <div class="elem2"></div>
- <div class="elem2"></div>
- <div class="elem2"></div>
- <div class="elem2"></div>
- <div class="elem2"></div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement