undefined
AW: [CSS] CSS-Contest 2012 WIPs
@stromer - kombiniert und bissl umgebaut, funktioniert wunderbar sogar im FF die figcaption musst dir jetzt neu positionieren, die brauch keine Hintergrundbilder mehr.
Oder so :lol:ja wie jezze? dann lass ich den rotz weg
@stromer - kombiniert und bissl umgebaut, funktioniert wunderbar sogar im FF die figcaption musst dir jetzt neu positionieren, die brauch keine Hintergrundbilder mehr.
Code:
#gallery ul{
position:relative;
list-style:none;
margin:20px 40px 0 40px;
width:720px;
padding:0;
text-align: center;
}
#gallery ul li {
display:inline-block;
width:110px;
height:73px;
margin-right:30px;
background-size:cover;
background-position:50% 50%;
background-repeat:none;
padding:0;
opacity:0.5;
z-index:1;
box-shadow: 0px 2px 3px #090909;
}
#gallery ul li:nth-child(1) {
background-image:url(../images/rocketship.jpg);
animation: thumb 40s linear 0s infinite;
}
#gallery ul li:nth-child(2) {
background-image:url(../images/behind_the_scenes.jpg);
animation: thumb 40s linear 8s infinite;
}
#gallery ul li:nth-child(3) {
background-image:url(../images/femme_fatale.jpg);
animation: thumb 40s linear 16s infinite;
}
#gallery ul li:nth-child(4) {
background-image:url(../images/a_paper_bag_story.jpg);
animation: thumb 40s linear 24s infinite;
}
#gallery ul li:nth-child(5) {
background-image:url(../images/rocketship_music.jpg);
animation: thumb 40s linear 32s infinite;
margin-right:0;
}
#gallery ul li:hover {
opacity:1;
}
#gallery ul li figure {
margin:0;
position:absolute;
top:60px;
left:50%;
margin:0 0 0 -320px;
width:640px;
height:400px;
overflow:hidden;
opacity:0;
}
#gallery ul li:hover figure {
opacity:1;
z-index: 1000;
box-shadow: inset 0px 0px 3px #090909;
color:#046380;
}
#gallery ul li:nth-child(1) figure {
animation: versuch 40s linear 0s infinite;
}
#gallery ul li:nth-child(2) figure {
animation: versuch 40s linear 8s infinite;
}
#gallery ul li:nth-child(3) figure {
animation: versuch 40s linear 16s infinite;
}
#gallery ul li:nth-child(4) figure {
animation: versuch 40s linear 24s infinite;
}
#gallery ul li:nth-child(5) figure {
animation: versuch 40s linear 32s infinite;
}
#gallery ul:hover li,#gallery ul:hover li figure{animation:none;}
@keyframes versuch {
0%{opacity:0;}
5%{opacity:1;}
20%{opacity:1;}
25%{opacity:0;}
100%{opacity:0;}
}
@keyframes thumb {
0%{opacity:.5;}
5%{opacity:1;}
20%{opacity:1;}
25%{opacity:.5;}
100%{opacity:.5;}
}
#cc:before{
content:'';
display:block;
z-index:100;
margin:0;
position:absolute;
top:124px;
left:40px;
width:720px;
height:400px;
}
#cc {
padding:0;
margin:420px 0 0 0;
float:right;
font-family:Cuprum;
font-size:14px;
font-weight:bold;
}
Zuletzt bearbeitet: