ShowCase Boxes2

by freedawirl

HTML

<div class="content-container">
    <div class="biz-page-subheader">
        <div class="showcase-container">
            
            
            <div class="showcase showcase-4-photo" data-component-bound="true">
        
                <div>
                    <div class="showcase-photos prev">
                        <div class="js-photo photo photo-1" data-media-index="2">
                            <div class="showcase-photo-box"> <a href="#">
            
                <img alt="Uber - Austin, TX, United States" class="photo-box-img" height="250" src="http://s3-media2.fl.yelpcdn.com/bphoto/UwPl7Dexik3MR56U4Wxk1A/ls.jpg" width="250">


        </a>

                            </div>
                            <div class="photo-box-overlay js-overlay">
                                <div class="photo-box-overlay_caption">Caption1</div>
                            </div>
                        </div>
                            
                        <div class="js-photo photo photo-2" data-media-index="0">
                            <div class="showcase-photo-box">
                                <a href="#">
            
                <img alt="Uber - Austin, TX, United States" class="photo-box-img" height="250" src="http://s3-media1.fl.yelpcdn.com/bphoto/EKq1qkzVgaOOxVZwjReTFw/ls.jpg" width="250">


        </a>

                            </div>
                            <div class="photo-box-overlay js-overlay">
                                <div class="photo-box-overlay_caption">Caption2</div>
                            </div>
                        </div>
                            
                            
                            
                            
                        <div class="js-photo photo photo-3" data-media-index="1">
                            <div class="showcase-photo-box"> <a href="#">
            
                <img alt="Uber - Austin, TX, United States" class="photo-box-img" height="250"...

CSS

.showcase {
    position:relative;
    width:100%;
    height:220px
}
.ltie8 .showcase {
    margin-top:15px
}
.showcase .showcase-photo-box {
    height:100%
}
.showcase-footer-links {
    position:absolute;
    right:0;
    left:0;
    top:100%;
    padding:6px 0
}


.showcase-photos {
    position:relative;
    width:660px;
    height:220px;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    transform-style:preserve-3d
        border:2px solid red;
}
.showcase-photos .photo:before {
    z-index:-1;
    content:"...";
    display:block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    padding-right:10px;
    font-size:50px;
    font-family:monospace;
    letter-spacing:-15px;
    text-align:center;
    line-height:230px;
    background:#ededea;
    color:white
}
.ltie9 .showcase-photos .photo:before {
    display:none
}
.showcase-photos .photo img {
    display:block
}
.showcase-photos .photo-grid img {
    float:left;
    width:50%;
    height:50%
}
.showcase-photos .photo, .showcase-photos:hover .photo {
    z-index:1000;
    display:block;
    position:absolute;
    margin:-15px;
    width:250px;
    height:250px;
    -webkit-box-shadow:none;
    box-shadow:none;
    -webkit-transition:all 0.2s ease-out;
    transition:all 0.2s ease-out;
    -webkit-transition-property:-webkit-transform, box-shadow;
    transition-property:transform, box-shadow;
    -webkit-transform:scale(0.88);
    -moz-transform:scale(0.88);
    -ms-transform:scale(0.88);
    transform:scale(0.88);
    -webkit-transform:scale(0.88) translateZ(0);
    -moz-transform:scale(0.88) translateZ(0);
    -ms-transform:scale(0.88) translateZ(0);
    transform:scale(0.88) translateZ(0)
}
.showcase-photos .photo .photo-box-overlay, .showcase-photos:hover .photo .photo-box-overlay {
    opacity:0
}
.showcase-photos .photo-1 {
    left:0
}
.showcase-photos .photo-2 {
    left:220px
}
.showcase-photos...