<div id="allStrips">
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/1.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/2.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/3.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/4.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/5.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/6.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/7.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/8.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/9.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/10.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/11.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/12.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/13.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/14.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/15.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">↓</a>
<figure> <img src="projectX/images/gallery/16.jpg"/></figure>
</div>
</div>
#allStrips {
width:1280px;
height:800px;
position:relative;
margin:0 auto;
padding:20px;
overflow:visible;
}
#allStrips a {
text-decoration: none;
color: rgba(251,251,251,1.00);
}
#allStrips a:hover {
opacity: 0.5;
color:rgba(255,255,255,1.00);
}
#allStrips a:active {
position: relative;
top: 1px;
opacity: 0.3;
}
/* galleryArrow */
.stripGallery .galleryArrow {
font-size: 3em;
line-height: 2.7em;
text-align: center;
position: fixed;
width: 80px;
height: 80px;
top: 100px;
display: none;
}
.stripGallery:hover .galleryArrow {
display: block;
}
/* Strip Gallery ------------------------------------------------- */
.stripGallery {
width: 80px;
overflow: hidden;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
padding-top: 0px;
float: left;
-webkit-transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
-moz-transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
-ms-transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
-o-transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
}
.stripGallery:hover {
z-index: 1;
position: relative;
overflow: visible;
padding-top: 80px;
-webkit-transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
-moz-transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
-ms-transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
-o-transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
}
.stripGallery figure {
text-align:center;
}
.stripGallery figure img{
margin-left: -80px;
}
.stripGallery:hover figure img {
margin-left: 0px;
box-shadow: 0px 2px 20px rgba(0,0,0,0.5);
border-radius: 30px;
border-top-left-radius: 0px;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0, 0.75, 0, 1);
-moz-transition: -moz-transform 0.2s cubic-bezier(0, 0.75, 0, 1);
-ms-transition: -ms-transform 0.2s cubic-bezier(0, 0.75, 0, 1);
-o-transition: -o-transform 0.2s cubic-bezier(0, 0.75, 0, 1);
transition: transform 0.2s cubic-bezier(0, 0.75, 0, 1);
}
.stripGallery div {
min-width: 80px;
min-height: 105px;
}