Guten Abend liebe Community,
ich habe in meine CSS jetzt folgende Problematik.
Ich habe den Befehl Figure jetzt zwei mal drin aber die müssen unabhängig voneinander agieren.
Da das eine Figure für eine andere Seite gilt.
Ich hoffe konnte es einigermaßen verständlich erklären
Code
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: row wrap;
text-align: center;
background-image: url(onewebmedia/Hintergrund2.jpeg);
background-attachment: fixed;
font-family: Arial, sans-serif;
}
header, footer {
flex: 1 100%;
}
section {
flex: 4;
}
aside {
flex: 1;
}
header {
/* background-color: yellow; */
background-image: url(Homepage/shadow-hintergrund.jpg);
height: 200px;
}
header p {
/* background-color: orange; */
text-align: right;
padding: 15px;
}
#steuerungoben {
/* background-color: red; */
-ms-flex-direction: column;
flex-direction: column;
background-image: url(Bilder/hintergund-grey.png);
}
#steuerungoben ul {
display: flex;
list-style-type: none;
}
#steuerungoben li {
display: flex;
}
#steuerungoben a {
display: block;
width: 19em;
/* background-color: yellow;*/
/*float: left;*/
/* border-right: 1px red solid; */
color: white;
text-decoration: none;
line-height: 24px;
text-align: center
}
#steuerungoben a:hover {
background-image: url(Bilder/hintergrund-black.png);
}
.flex-container {
display:flex
}
#steuerunglinks {
/* background-color: green; */
width: 230px;
}
#steuerunglinks ul {
padding-left: 1em;
padding-top: 20px;
list-style-type: none
}
#steuerunglinks a {
color: #dd9661;
line-height: 30px;
}
#wuerfe a {
Color: black;
}
aside {
background-color: #808000;
display: flex;
flex-direction:column;
align-content: center;
align-items: center;
}
aside>img,
aside>a {
margin-top: 20px;
padding-left: 5px;
padding-right: 5px;
}
section h1 {
padding-top: 20px;
padding-bottom: 0.4em;
color: #dd9661;
}
section h2 {
color: black;
padding-top: 1em;
padding-bottom: 0.6em;
}
section h4 {
color: black;
padding-top: 1em;
padding-bottom: 0.6em;
}
section p {
padding-bottom: 1em;
}
#link {
display: flex;
justify-content: center;
}
#bildergalerie {
display: flex;
flex-flow: row wrap;
justify-content:space-around;
/* display: flex;
justify-content: space-around;*/
}
#starkeschrift {
font-weight: bold;
}
#table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
#table table, th, td {
border: 1px solid orange;
padding: 5px;
}
#table tbody tr:hover {
background: yellow;
}
footer {
background-color: brown;
background-image: url(Bilder/hintergund-grey.png);
text-align: center;
color: white;
clear: both;
}
#wrapper {
/* background-color: #eeeeee; */
width: 76em;
margin: 0 auto;
text-align: left;
background-image: url(hintergrund-durch.png);
}
/* Ab hier sind die Funktionen für Hover */
#conti{
margin: auto;
margin-top:10px;
overflow:hidden;
display: flex;
justify-content: space-around;
}
#plus {
width: 30px;
height: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: 90px;
}
figure{
width: 200px;
height: 230px;
overflow:hidden;
}
img{
width:100%;
overflow:hidden;
}
figcaption{
padding:10px;
text-align:center;
transition:all 1s;
width:calc(100% - 20px);
}
figure:hover > figcaption{
transform: translateY(-100%);
transition:all 1s;
background:white;
}
/* Slideshow mit Zoom-Effekt */
.pic-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
opacity: 0;
/*animation*/
animation: slideShow 24s linear infinite 0s;
-o-animation: slideShow 24s linear infinite 0s;
-moz-animation: slideShow 24s linear infinite 0s;
-webkit-animation: slideShow 24s linear infinite 0s;
}
figurecaption {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
}
.pic-1 {
opacity: 1;
background: url(http://cdn.morguefile.com/imageData/public/files/g/GaborfromHungary/06/p/74fea178af5c36b5303625ffeacd8454.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-2 {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz--animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(http://cdn.morguefile.com/imageData/public/files/k/Koan/06/p/ea989990a29bb73aa78db9f8322b5631.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-3 {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz--animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(http://cdn.morguefile.com/imageData/public/files/t/TSmythe/06/p/74820906fce25071550b74b6773a0e19.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-4 {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz--animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(http://cdn.morguefile.com/imageData/public/files/i/Isbiliani/05/p/8787b7ac34a8de4c4aad6fe8a5d7e925.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* keyframes*/
@keyframes
slideShow { 0% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
transform:scale(1.1);
-ms-transform:scale(1.1);
}
100% {
opacity: 0;
transform:scale(1);
-ms-transformm:scale(1);
}
}
@-o-keyframes
slideShow { 0% {
opacity: 0;
-o-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-o-transform:scale(1.1);
}
100% {
opacity: 0;
-o-transformm:scale(1);
}
}
@-moz-keyframes
slideShow { 0% {
opacity: 0;
-moz-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
opacity: 0;
-moz-transformm:scale(1);
}
}
@-webkit-keyframes
slideShow { 0% {
opacity: 0;
-webkit-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform:scale(1.1);
}
100% {
opacity: 0;
-webkit-transformm:scale(1);
}
}
Alles anzeigen