Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .carousel
- {
- position: relative;
- overflow: hidden;
- padding: 2em 0 2em 0;
- }
- .carousel .forward,
- .carousel .backward
- {
- position: absolute;
- top: 50%;
- width: 6em;
- height: 12em;
- margin-top: -6em;
- cursor: pointer;
- }
- .carousel .forward
- {
- right: 0;
- }
- .carousel .backward
- {
- left: 0;
- }
- .carousel .forward:before,
- .carousel .backward:before
- {
- content: '';
- display: block;
- width: 6em;
- height: 6em;
- border-radius: 100%;
- background-color: rgba(72,57,73, 0.5);
- position: absolute;
- top: 50%;
- margin-top: -3em;
- -moz-transition: background-color 0.35s ease-in-out;
- -webkit-transition: background-color 0.35s ease-in-out;
- -o-transition: background-color 0.35s ease-in-out;
- -ms-transition: background-color 0.35s ease-in-out;
- transition: background-color 0.35s ease-in-out;
- -webkit-backface-visibility: hidden;
- }
- .carousel .forward:after,
- .carousel .backward:after
- {
- content: '';
- width: 3em;
- height: 3em;
- position: absolute;
- top: 50%;
- margin: -1.5em 0 0 0;
- background: url('images/arrow.svg') no-repeat center center;
- }
- .carousel .forward:after
- {
- right: -0.25em;
- }
- .carousel .backward:after
- {
- left: -0.25em;
- -moz-transform: scaleX(-1);
- -webkit-transform: scaleX(-1);
- -o-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- }
- .carousel .forward:before
- {
- right: -3em;
- }
- .carousel .backward:before
- {
- left: -3em;
- }
- .carousel .forward:hover:before,
- .carousel .backward:hover:before
- {
- background-color: rgba(239,131,118, 0.75);
- }
- .carousel .reel
- {
- white-space: nowrap;
- position: relative;
- -webkit-overflow-scrolling: touch;
- padding: 0 2em 0 2em;
- }
- .carousel article
- {
- display: inline-block;
- width: 18em;
- background: #fff;
- text-align: center;
- padding: 0 1em 3em 1em;
- margin: 0 2em 0 0;
- white-space: normal;
- opacity: 1.0;
- -moz-transition: opacity 0.75s ease-in-out;
- -webkit-transition: opacity 0.75s ease-in-out;
- -o-transition: opacity 0.75s ease-in-out;
- -ms-transition: opacity 0.75s ease-in-out;
- transition: opacity 0.75s ease-in-out;
- }
- .carousel article.loading
- {
- opacity: 0;
- }
- .carousel article .image
- {
- position: relative;
- left: -1em;
- top: 0;
- width: auto;
- margin-right: -2em;
- margin-bottom: 3em;
- }
- .carousel article p
- {
- text-align: center;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement