hier noch die CSS zur bildergalerie:
@charset "utf-8";
/* CSS Document */
input#box1, input#box2,input#box3,input#box4,input#box5 {
display: none;
}
label { cursor: pointer }
#foto_ausgabemodul {
position: relative;
width: 45.5vw;
height: 34vw;
overflow: hidden;
margin: 0 auto;
border: 2px dotted red;
}
#foto_ausgabemodul .switch {
position: relative;
left:1vw ;
height: 1vw;
width: 1vw;
float: left;
color: rgba(0,0,0,0.6);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#foto_ausgabemodul .switch:hover {
opacity: 1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#foto_ausgabemodul .holder {
position: relative;
width: 5vw;
border: 1px dotted orange;
}
#foto_ausgabemodul_1 img,
#foto_ausgabemodul_2 img,
#foto_ausgabemodul_3 img,
#foto_ausgabemodul_4 img,
#foto_ausgabemodul_5 img {
position: absolute;
top: 0;
left: 4.5vw;
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#foto_ausgabemodul #box1:checked ~ div#foto_ausgabemodul_1 img,#foto_ausgabemodul #box2:checked ~ div#foto_ausgabemodul_2 img,
#foto_ausgabemodul #box3:checked ~ div#foto_ausgabemodul_3 img,#foto_ausgabemodul #box4:checked ~ div#foto_ausgabemodul_4 img,
#foto_ausgabemodul #box5:checked ~ div#foto_ausgabemodul_5 img {
opacity: 1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#foto_ausgabemodul #box1:checked ~ div { margin-left: 0px }
#foto_ausgabemodul #box2:checked ~ div { margin-left: -1vw }
#foto_ausgabemodul #box3:checked ~ div { margin-left: -2vw }
#foto_ausgabemodul #box4:checked ~ div { margin-left: -3vw }
#foto_ausgabemodul #box5:checked ~ div { margin-left: -4vw }
#box1:checked ~ div #zwei::after {
top: 31vw;
left: 40vw;
position: absolute;
display: block;
font-size: 2.5vw;
content:">>";
z-index: 2;
}
#box2:checked ~ div #eins::before {
top: 31vw;
left: 0.5vw;
position: absolute;
display: block;
font-size: 2.5vw;
content:"<<";
z-index: 2;
}
#box2:checked ~ div #drei::after {
top: 31vw;
left: 40vw;
position: absolute;
display: block;
font-size: 2.5vw;
content:">>";
z-index: 2;
}
#box3:checked ~ div #zwei::before {
top: 31vw;
left: 0.5vw;
position: absolute;
display: block;
font-size: 2.5vw;
content:"<<";
z-index: 2;
}
#box3:checked ~ div #vier::after {
top: 31vw;
left:40vw;
position: absolute;
display: block;
font-size: 2.5vw;
content:">>";
z-index: 2;
}
#box4:checked ~ div #drei::before {
top: 31vw;
left: 0.5vw;
position: absolute;
display: block;
font-size: 2.5vw;
content:"<<";
z-index: 2;
}
#box4:checked ~ div #fünf::after {
top: 31vw;
left:40vw;
position: absolute;
display: block;
font-size: 2.5vw;
content:">>";
z-index: 2;
}
#box5:checked ~ div #vier::before {
top: 31vw;
left: 0.5vw;
position: absolute;
display: block;
font-size: 2.5vw;
content:"<<";
z-index: 2;
}