|
|
| (12 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | /*************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*********/
| |