|
|
Line 63: |
Line 63: |
| background-size: 400%; | | 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*********/
| |
| p { | | p { |
| text-align: left; | | text-align: left; |