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 name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/out/agan/src/css/libs/swiper.min.css?1512660665" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/modules/makaira/connect/out/dist/makaira.12208f12.min.css" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/modules/bestit/amazonpay4oxid/out/src/css/bestitamazonpay4oxid.css" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/out/agan/src/css/slidebars.min.css?1575543236" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/out/agan/src/css/styles.vendor.min.css?1575543237" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/out/agan/src/css/styles.agan.min.css?1575543258" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/modules/ddoe/visualcms/out/src/css/font-awesome.min.css" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/modules/ddoe/visualcms/out/src/css/photoswipe.min.css" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/modules/ddoe/visualcms/out/src/css/style.min.css" />
- <link rel="stylesheet" type="text/css" href="https://asgoodasnew.de/modules/oe/oegdprbase/out/css/oegdprbase-agan.css" />
- <style>
- .teaserWrapper {
- width: 1170px;
- height: 500px;
- position: relative;
- margin: 0 auto;
- overflow: hidden;
- }
- .firstImage {
- position: absolute;
- top: 0;
- left: 0;
- width:33.33%;
- height:100%;
- overflow: hidden;
- }
- @keyframes firstImageAni {
- 0% {
- width:33.33%;
- }
- 100% {
- width:95%;
- box-shadow: 0 10px 10px 0 #000;
- }
- }
- .firstImage:hover{
- z-index:2;
- animation-name: firstImageAni;
- animation-duration: 400ms;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- }
- @keyframes secondImageAni {
- 0% {
- width:33.33%;
- }
- 100% {
- left:2.5%;
- width:95%;
- box-shadow: 0 0 10px 0 #000;
- }
- }
- .secondImage {
- position: absolute;
- top: 0;
- left: 33%;
- height:100%;
- overflow: hidden;
- }
- .secondImage:hover{
- z-index: 2;
- animation-name: secondImageAni;
- animation-duration: 400ms;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- }
- @keyframes thirdImageAni {
- 0% {
- width:33.33%;
- }
- 100% {
- left:5%;
- width:95%;
- box-shadow: 0 -10px 10px 0 #000;
- }
- }
- .thirdImage {
- position: absolute;
- top: 0;
- left: 66%;
- height: 100%;
- overflow: hidden;
- }
- .thirdImage:hover{
- z-index: 2;
- animation-name: thirdImageAni;
- animation-duration: 400ms;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- }
- </style>
- </head>
- <body>
- <div class="agan-container">
- <div class="teaserWrapper">
- <div class="firstImage">
- <img src="https://www.asgoodasnew.de/out/pictures/ddmedia/teaser_handys.jpg">
- </div>
- <div class="secondImage">
- <img src="https://www.asgoodasnew.de/out/pictures/ddmedia/teaser_macbooks.jpg">
- </div>
- <div class="thirdImage">
- <img src="https://www.asgoodasnew.de/out/pictures/ddmedia/teaser_tablets.jpg">
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement