ShowCase Boxes

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 class="top-shelf-grey"></div>
                <div class="showcase-footer-links"> <a href="/biz_photos/uber-austin-5" class="i-wrap ig-wrap-biz_details i-more-photos-biz_details-wrap see-more pull-right"><i class="i ig-biz_details i-more-photos-biz_details"></i> See all 8 photos</a>

                </div>
                <div data-dfp-attributes="[[&quot;remove_ads&quot;, &quot;no&quot;]]" data-dfp-sizes="[[728, 90]]" data-dfp-type="biz" data-ga-path="media_lightbox/servlet:biz_details/type:biz" data-logging-csrf="693410d60dad066a3320f95c57ea3b89ffadeb62264a82893c6fb3adeb03aade" data-logging-uri="/biz_photos/IAqFSJqTqb_iuPoqg3OIDg/log_views" data-media-count="8" data-media-url="/biz_photos/get_media_slice/IAqFSJqTqb_iuPoqg3OIDg" data-starting-index="0" class="lightbox-media-parent slider-outer" aria-hidden="true">
                    <div class="showcase-photos prev">
                        <div class="js-photo photo photo-1" data-media-index="2">
                            <div class="showcase-photo-box"> <a href="/biz_photos/uber-austin-5?select=UwPl7Dexik3MR56U4Wxk1A">
            
                <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">Uber - Austin, TX, United States</div>
                            </div>
                        </div>
                        <div class="js-photo photo photo-2" data-media-index="0">
                            <div class="showcase-photo-box"> <a...

CSS

.no-scroll {
    overflow:hidden;
    height:100%;
    width:100%
}
.no-scroll body {
    overflow:hidden;
    height:100%;
    width:100%
}
#rating-details-popup .ypop-content {
    max-width:465px
}
.showcase {
    position:relative;
    width:660px;
    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-footer-links .play-video {
    margin-left:6px
}
.nav.is-disabled {
    opacity:0.4;
    cursor:default
}
.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
}
.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);
   ...

JavaScript

yelp.www.init.biz_details.initBookmark(false, "/bookmark/remove_biz_confirm", "1bff3b3277309b51d293c23e6086e3fac010e9c3b71eb66eefebebd238c18ccc",					 "48a48fae3128447a11455aa2607bb14a2a2baddc13485f90dcf485f3622dc69d");
yelp.www.init.biz_details.sendToFriend("adf5bc8b1a283bf87e576a0bc6d2caa8e3a592832fbdaa4ccb482c6ae1c5d233");
yelp.www.init.biz_details.reservations("4f9f5543058418f8ed6e7bbb030cc1cda8c3541794cdd15a6e06cca063b205c9", "IAqFSJqTqb_iuPoqg3OIDg", false, false);
yelp.www.init.biz_details.initEditCategory(true);
yelp.www.init.biz_details.initPlatform();
yelp.www.init.biz_details.initPositionWithScroll();
yelp.www.init.biz_details.boyModule("/biz/uber-austin-5/best_of_yelp/");
yelp.www.init.biz_details.fromBusinessOwner();
yelp.www.init.biz_details.ratingDetails();
yelp.www.init.biz_details.reviewFeedController("/biz/uber-austin-5/review_feed/", "/biz/uber-austin-5/review_highlight_feed/", 3, 8, "20130924");
yelp.www.init.biz_details.initMapLightbox();
yelp.www.init.biz_details.initSpamAlert();
yelp.www.init.biz_details.initDealExpander();
yelp.www.init.biz_details.initBizPhotoMetrics();
yelp.www.init.biz_details.mapSitRepLogger("IAqFSJqTqb_iuPoqg3OIDg");
yelp.www.init.biz_details.initMediaShowcase(8, "/biz_photos/IAqFSJqTqb_iuPoqg3OIDg/photos", [{
    "src": "http://s3-media2.fl.yelpcdn.com/bphoto/yfMvba_A2Kjzq635pNdRnw/ls.jpg",
    "html": "\u003cdiv class=\"js-photo photo\" data-media-index=\"3\"\u003e\n        \u003cdiv class=\"showcase-photo-box\"\u003e\n            \n        \u003ca href=\"/biz_photos/uber-austin-5?select=yfMvba_A2Kjzq635pNdRnw\"\u003e\n            \n                \u003cimg alt=\"Uber - Austin, TX, United States. Black as your motto\" class=\"photo-box-img\" height=\"250\" src=\"http://s3-media2.fl.yelpcdn.com/bphoto/yfMvba_A2Kjzq635pNdRnw/ls.jpg\" width=\"250\"\u003e\n\n\n        \u003c/a\u003e\n\n        \u003c/div\u003e\n\n\n                    \u003cdiv class=\"photo-box-overlay js-overlay\"\u003e\n                \u003cdiv...