Difference between revisions of "Team:CHINA CD UESTC/Gallery"

Line 34: Line 34:
  
 
/**************gallery******************/
 
/**************gallery******************/
−
/****gallery ***********/
+
.gallery-container2 {
−
.gallery{
+
    padding:10px 0 0 0 ;
−
width: 1000px;
+
    position:relative;
−
height: 800px;
+
    width:90%;
−
position: relative;
+
 
−
text-align: center;
+
    border-radius:5px;
 
}
 
}
−
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg,
+
 
−
.cr-bgimg div span:nth-child(1){
+
/* css3 photo gallery styles */
−
background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG);
+
.gallery2 {
−
background-size: 400%;
+
    width:1000px;
 +
    margin:10px 0 0 40px;
 
}
 
}
−
.cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg,
+
.gallery2 a {
−
.cr-bgimg div span:nth-child(2){
+
    display:inline-block;
−
background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG);
+
    height:200px;
−
background-size: 400%;
+
    position:relative;
 +
    width:250px;
 +
    margin-left: 20px;
 +
    margin-right: 20px;
 +
    margin-top: 20px;
 +
    border: 10px solid #F2FFDE;
 +
    border-radius: 5px;
  
 
}
 
}
−
.cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg,
+
.gallery2 a img {
−
.cr-bgimg div span:nth-child(3){
+
    cursor:pointer;
−
background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG);
+
    display:block;
−
background-size: 400%;
+
    height:100%;
 +
    left:0px;
 +
    position:absolute;
 +
    top:0px;
 +
    width:100%;
 +
    z-index:1;
  
 +
    -moz-user-select: none;
 +
    -khtml-user-select: none;
 +
    user-select: none;
 +
 +
    -moz-box-sizing:border-box;
 +
    -webkit-box-sizing:border-box;
 +
    box-sizing:border-box;
 +
 +
    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
    -webkit-transition-duration:0.5s;
 +
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
    -moz-transition-duration:0.5s;
 +
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
    -o-transition-duration:0.5s;
 +
    transition-property:width, height, top, bottom, left, right, z-index, border;
 +
    transition-duration:0.5s;
 
}
 
}
−
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg,
+
.gallery2 a:focus img {
−
.cr-bgimg div span:nth-child(4){
+
    border:15px solid #fff;
−
background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG);
+
    cursor:default;
−
background-size: 400%;
+
    height:250%;
 +
    position:absolute;
 +
    width:250%;
 +
    z-index:25;
 +
 
 +
    box-shadow:1px 1px 5px #888;
 +
    -moz-box-shadow:1px 1px 5px #888;
 +
    -webkit-box-shadow:1px 1px 5px #888;
 +
    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
    -webkit-transition-duration:0.5s;
 +
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
    -moz-transition-duration:0.5s;
 +
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
    -o-transition-duration:0.5s;
 +
    transition-property:width, height, top, bottom, left, right, z-index, border;
 +
    transition-duration:0.5s;
 +
}
 +
 
 +
/* custom focus rules */
 +
.gallery2 a:focus:nth-child(3n+1) img {
 +
left:150px;
 +
}
 +
.gallery2 a:focus:nth-child(3n+2) img {
 +
    left:-50px;
 +
}
 +
.gallery2 a:focus:nth-child(3n+3) img {
 +
    left:-250px;
 +
}
 +
.gallery2 a:focus:nth-child(-n+3) img {
 +
    top:140px;
 +
}
 +
.gallery2 a:focus:nth-child(n+7) img {
 +
    top:-150px;
 +
}
 +
.gallery2 a:focus:nth-child(n+10) img {
 +
    top:-295px;
 +
}
 +
 
 +
/* extra close layer */
 +
.gallery2 .close {
 +
    background:transparent;
 +
    cursor:pointer;
 +
    display:none;
 +
    height:352px;
 +
    left:170px;
 +
    position:absolute;
 +
    top:160px;
 +
    width:500px;
 +
    z-index:30;
 +
}
 +
.gallery2 a:focus ~ .close {
 +
    display:block;
 
}
 
}
 
p {
 
p {
Line 82: Line 161:
  
 
<div id="RightContentText">
 
<div id="RightContentText">
−
 
+
         <div class="gallery-container2" id="gallery-container2">
−
         <div class="gallery">
+
            <div class="gallery2">
−
<section class="cr-gallery">
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
<label for="select-img-1" class="cr-label-img-1">1</label>
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
<label for="select-img-2" class="cr-label-img-2">2</label>
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
<label for="select-img-3" class="cr-label-img-3">3</label>
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
+
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
−
<label for="select-img-4" class="cr-label-img-4">4</label>
+
                <span class="close"></span>
−
+
            </div>
−
<div class="clr"></div>
+
−
<div class="cr-bgimg">
+
−
<div>
+
−
<span>Slice 1 - Image 1</span>
+
−
<span>Slice 1 - Image 2</span>
+
−
<span>Slice 1 - Image 3</span>
+
−
<span>Slice 1 - Image 4</span>
+
−
</div>
+
−
<div>
+
−
<span>Slice 2 - Image 1</span>
+
−
<span>Slice 2 - Image 2</span>
+
−
<span>Slice 2 - Image 3</span>
+
−
<span>Slice 2 - Image 4</span>
+
−
</div>
+
−
<div>
+
−
<span>Slice 3 - Image 1</span>
+
−
<span>Slice 3 - Image 2</span>
+
−
<span>Slice 3 - Image 3</span>
+
−
<span>Slice 3 - Image 4</span>
+
−
</div>
+
−
<div>
+
−
<span>Slice 4 - Image 1</span>
+
−
<span>Slice 4 - Image 2</span>
+
−
<span>Slice 4 - Image 3</span>
+
−
<span>Slice 4 - Image 4</span>
+
−
</div>
+
−
</div>
+
−
<div class="cr-titles">
+
−
<h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
+
−
<h3><span>Adventure</span><span>Where the fun begins</span></h3>
+
−
<h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
+
−
<h3><span>Serenity</span><span>When silence touches nature</span></h3>
+
−
</div>
+
−
</section>
+
 
         </div>
 
         </div>
 +
  
  

Revision as of 02:36, 22 August 2015

<!DOCTYPE html>

GALLERY

  We are a skillful and persistent group of nine Finns. We started as a group of students who didn't really know each other, assuming that we were going to spend our summer studying synthetic biology with strange colleagues. In the end we got a bunch of new friends and (in addition to studying synthetic biology) we just might have spent one of the best summers of our lives.