Stay up to date, subscribe to my newsletter
Per visualizzare correttamente il contenuto devi accettare i cookie. Accetto
/**
carouselFrame FOR Frame PRODUCT INFO PAGE
*/
.carouselFrame > input[type="radio"]:nth-child(1):checked ~ .carouselFrame__prev > label:nth-child(5), .carouselFrame > input[type="radio"]:nth-child(1):checked ~ .carouselFrame__next > label:nth-child(2), .carouselFrame > input[type="radio"]:nth-child(2):checked ~ .carouselFrame__prev > label:nth-child(1), .carouselFrame > input[type="radio"]:nth-child(2):checked ~ .carouselFrame__next > label:nth-child(3), .carouselFrame > input[type="radio"]:nth-child(3):checked ~ .carouselFrame__prev > label:nth-child(2), .carouselFrame > input[type="radio"]:nth-child(3):checked ~ .carouselFrame__next > label:nth-child(4), .carouselFrame > input[type="radio"]:nth-child(4):checked ~ .carouselFrame__prev > label:nth-child(3), .carouselFrame > input[type="radio"]:nth-child(4):checked ~ .carouselFrame__next > label:nth-child(5), .carouselFrame > input[type="radio"]:nth-child(5):checked ~ .carouselFrame__prev > label:nth-child(4), .carouselFrame > input[type="radio"]:nth-child(5):checked ~ .carouselFrame__next > label:nth-child(1) {
opacity: 1 !important;
z-index: 3;
}
.carouselFrame {
width: 100%;
position: relative;
overflow: hidden;
}
.carouselFrame > input[type="radio"] {
position: absolute;
left: 0;
opacity: 0;
top: 0;
}
.carouselFrame > input[type="radio"]:checked ~ .carouselFrame__items .carouselFrame__item,
.carouselFrame > input[type="radio"]:checked ~ .carouselFrame__prev > label,
.carouselFrame > input[type="radio"]:checked ~ .carouselFrame__next > label {
opacity: 0;
}
.carouselFrame > input[type="radio"]:nth-child(1):checked ~ .carouselFrame__items .carouselFrame__item:nth-child(1) {
opacity: 1;
}
.carouselFrame > input[type="radio"]:nth-child(1):checked ~ .carouselFrame__nav > label:nth-child(1) {
background: #ccc;
cursor: default;
pointer-events: none;
}
.carouselFrame > input[type="radio"]:nth-child(2):checked ~ .carouselFrame__items .carouselFrame__item:nth-child(2) {
opacity: 1;
}
.carouselFrame > input[type="radio"]:nth-child(2):checked ~ .carouselFrame__nav > label:nth-child(2) {
background: #ccc;
cursor: default;
pointer-events: none;
}
.carouselFrame > input[type="radio"]:nth-child(3):checked ~ .carouselFrame__items .carouselFrame__item:nth-child(3) {
opacity: 1;
}
.carouselFrame > input[type="radio"]:nth-child(3):checked ~ .carouselFrame__nav > label:nth-child(3) {
background: #ccc;
cursor: default;
pointer-events: none;
}
.carouselFrame > input[type="radio"]:nth-child(4):checked ~ .carouselFrame__items .carouselFrame__item:nth-child(4) {
opacity: 1;
}
.carouselFrame > input[type="radio"]:nth-child(4):checked ~ .carouselFrame__nav > label:nth-child(4) {
background: #ccc;
cursor: default;
pointer-events: none;
}
.carouselFrame > input[type="radio"]:nth-child(5):checked ~ .carouselFrame__items .carouselFrame__item:nth-child(5) {
opacity: 1;
}
.carouselFrame > input[type="radio"]:nth-child(5):checked ~ .carouselFrame__nav > label:nth-child(5) {
background: #ccc;
cursor: default;
pointer-events: none;
}
.carouselFrame__items {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
height: 600px;
position: relative;
}
.carouselFrame__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: opacity 2s;
-webkit-transition: opacity 2s;
}
.carouselFrame__item img {
width: 100%;
vertical-align: middle;
}
.carouselFrame__prev > label:hover, .carouselFrame__prev > label:focus, .carouselFrame__next > label:hover, .carouselFrame__next > label:focus {
opacity: .5 !important;
}
.carouselFrame__prev > label:before, .carouselFrame__prev > label:after, .carouselFrame__next > label:before, .carouselFrame__next > label:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
}
.carouselFrame__prev > label:before, .carouselFrame__next > label:before {
background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);
width: 60%;
height: 60%;
top: 20%;
}
.carouselFrame__prev > label {
left: 2%;
}
.carouselFrame__prev > label:before {
left: 35%;
top: 20%;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.carouselFrame__next > label {
right: 2%;
}
.carouselFrame__next > label:before {
left: 10%;
transform: rotate(315deg);
-webkit-transform: rotate(315deg);
}
/* carouselFrame CUSTOMIZATION MATTEO */
.carouselFrame__prev>label, .carouselFrame__next>label {
border: 0px;
cursor: pointer;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transition: all .3s ease;
-webkit-transition: all .3s ease;
opacity: 1;
z-index: 2;
}
.carouselFrame__prev>label {
left: 5%;
}
.carouselFrame__next>label {
right: 5%;
}
.carouselFrame__nav {
position: absolute;
bottom: 5%;
left: 0;
text-align: center;
width: 100%;
z-index: 3;
}
.carouselFrame__nav > label {
border: 1px solid #fff;
display: inline-block;
/* border-radius: 50%; */
cursor: pointer;
margin: 0 1%;
width: 15px;
height: 15px;
}
.carouselFrame__item {
position: absolute;
/*margin: 0; */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: opacity 2s;
-webkit-transition: opacity 2s;
}
.carouselFrame__items {
margin: 0;
padding: 100% 0 0 0;
/* list-style-type: none; */
width: 100%;
height: auto;
position: relative;
}
.carouselFrame__item img {
width: 100%;
vertical-align: middle;
}
.carouselFrame {
width: 100%;
position: relative;
overflow: hidden;
}
/* ---------------------------------------------- */
