Team:CHINA CD UESTC/gallery.css
/****gallery ***********/ .gallery{ width: 600px; height: 100%; position: relative; text-align: center; margin-right: 20px; display: inline; }
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
background-image: url(
);
background-size: 400%;
}
.cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
background-image: url();
background-size: 400%;
}
.cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
background-image: url();
background-size: 400%;
}
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
background-image: url();
background-size: 400%;
}
/*************gallery 2***********/
- gal {
position:relative; width:700px; height:400px; margin:0 auto; top:100px; background:#000;
}
- gal:after {
content:; position:absolute; bottom:24px; right:0; left:0; width:100%; height:1px; background:rgba(255,255,255,0.35); z-index:3;
}
- gal ul {list-style-type:none;}
input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] {
position:absolute; bottom:80px; display:block; width:22px; height:22px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; cursor:pointer;
} input[class="re_radio"] {
opacity:0; z-index:200;
} input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;} input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;} input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;} input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;} input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;} input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;} input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;} input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;}
input[class="re_radio"] + label[class="re_label"] {
background:rgba(243,243,243,0.55); z-index:7; -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s;
} [class*="entypo-"]:before {
position:absolute; font-family: 'entypo', sans-serif;
} figure[class*="entypo-"]:before {
left:10px; top:5px; font-size:2rem; color:rgba(255,255,255,0); z-index:1; -webkit-transition:color .1s; -moz-transition:color .1s; -o-transition:color .1s; transition:color .1s;
} a[class*="entypo-"]:before {
top:8px; left:9px; font-size:1.5rem; color:white;
} a:hover[class*="entypo-"]:before {
color:white;
} figure, figure img, figcaption {
position:absolute; top:0; right:0;
} figure {
bottom:0; left:0; width:600px; height:300px; display:block; overflow:hidden;
} figure img {
bottom:0; left:0; display:block; width:700px; height:400px; z-index:1; -webkit-transform:translateX(600px); -moz-transform:translateX(600px); -ms-transform:translateX(600px); -o-transform:translateX(600px); transform:translateX(600px); -webkit-transition:all .15s .15s, z-index 0s; -moz-transition:all .15s .15s, z-index 0s; -o-transition:all .15s .15s, z-index 0s; transition:all .15s .15s, z-index 0s;
} figcaption {
display:block; width:270px; height:300px; padding-top:20px; background-image:radial-gradient(rgba( 255,255,255,0.3), transparent); background-size:600px 600px; background-repeat:no-repeat; background-position:-300px -150px; text-align:center; z-index:3; -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1); -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1); box-shadow:-5px 0px 20px rgba(0,0,0,0.1); -webkit-transform:translateX(300px); -moz-transform:translateX(300px); -ms-transform:translateX(300px); -o-transform:translateX(300px); transform:translateX(300px); -webkit-transition:all .35s; -moz-transition:all .35s; -o-transition:all .35s; transition:all .35s;
}
figcaption nav ul {display:block;padding-top:10px;} figcaption nav ul li {display:inline-block;margin-left:5px;} figcaption nav ul li a {
position:relative; display:block; width:40px; height:40px; background:rgba(255,255,255,0.2); text-decoration:none; color:white; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); -webkit-transition:all .15s; -moz-transition:all .15s; -o-transition:all .15s; transition:all .15s;
} figcaption nav ul li a:hover {
background:rgba(255,255,255,0); -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
} figcaption p {
padding:50px 15px; font-family:'Titillium Web', sans-serif; font-weight:300; color:#333; background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35))); background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-size:1px 100%; background-repeat:no-repeat; background-position:50% 0%;
}
input[class="re_radio"]:hover + label[class="re_label"] {
background:rgba(255,255,255,0.6);
} input[class="re_radio"]:checked + label[class="re_label"] {
background:rgba(130,195,217,0.9); -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
} input[class="re_radio"]:checked + label[class="re_label"]:before {} input[class="re_radio"]:checked ~ figure img {
z-index:2; -webkit-transform:translatex(0px); -moz-transform:translatex(0px); -ms-transform:translatex(0px); -o-transform:translatex(0px); transform:translatex(0px); -webkit-transition:all .15s, z-index 0s; -moz-transition:all .15s, z-index 0s; -o-transition:all .15s, z-index 0s; transition:all .15s, z-index 0s;
} input[class="re_radio"]:checked ~ figure[class*="entypo-"]:before {
z-index:3; color:rgba(255,255,255,0.5); -webkit-transition:color .5s; -moz-transition:color .5s; -o-transition:color .5s; transition:color .5s;
} input[class="re_radio"]:checked ~ figure figcaption {
z-index:8; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); -webkit-transition:all .35s, .7s; -moz-transition:all .35s, .7s; -o-transition:all .35s, .7s; transition:all .35s, .7s;
} .entypo-forward { margin: 0; width: 100%; height: 100%; border: 20px solid #FDFDFD;
} .entypo-forward p { color: #000; font-size: 20px; font-family: 'Microsoft YaHei' }
/********end of gallery 2*********/