<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/RGonyeau/pen/QNLrBP?limit=all&page=54&q=gallery" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,700'>
<style class="cp-pen-styles"> body {
font-family: 'Source Sans Pro', sans-serif;
}
#gridGallery {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
h2,
.ms-WPBody h2 {
color: #000;
}
.box h3 {
color: #fff;
font-family: 'Source Sans Pro';
font-weight:700;
}
section {
margin: 25px 0;
}
#gridGallery .row {
background-color: black;
}
.box {
background-position: center center;
background-size: cover;
border: 1px solid #fff;
transition: opacity .25s;
overflow: hidden;
}
.hiddenText {
display: none !important;
}
.box:hover {
cursor: pointer;
z-index: 1;
}
#boxOne,
#boxTwo,
#boxSeven,
#boxEight {
height: 300px;
}
#boxThree,
#boxFour,
#boxFive,
#boxSix {
height: 150px;
}
#boxOne {
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageOne.jpg');
}
#boxEight {
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageEight.jpg');
}
#boxTwo {
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageTwo.jpg');
}
#boxSeven {
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageSeven.jpg');
}
#boxThree {
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageThree.jpg');
}
#boxSix {
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageSix.jpg');
}
#boxFour {
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageFour.jpg');
}
#boxFive {
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageFive.jpg');
}
.full {
float: none;
height: 600px !important;
width: 1170px;
position: absolute;
z-index: 2;
}
#gridH {
background-color: #eee;
min-height: 600px;
margin-bottom: 50px;
}
#gridH .row {
margin-top: 150px;
}
#gridH .row .full {
margin-top: -150px;
}
.full:hover {
transform: scale(1);
box-shadow: none;
}
.opacity {
opacity: .8;
}
.captionBox {
background-color: rgba(0, 0, 0, 0.8);
bottom: 50px;
color: white;
left: 50px;
padding: 25px;
position: absolute;
opacity: 0;
}
.captionBox p {
font-size: 16px;
font-weight:300;
}
.captionBox h3 {
margin-top: 0;
text-transform: uppercase;
}
.transition {
transition: 1s;
}
.bottomRight {
left: auto;
right: 80px;
}
.topRight {
left: auto;
right: 50px;
bottom: auto;
top: 50px;
}
.topLeft {
bottom: auto;
top: 50px;
}
.toggleIcon {
background-color: rgba(0, 0, 0, 0.7);
background-position: center center;
background-repeat: no-repeat;
background-size: 26px 26px;
border-radius: 3px;
bottom: 15px;
height: 36px;
left: -100px;
opacity: 0;
padding: 10px;
position: absolute;
width: 36px;
}
.box.full .toggleIcon {
background-color: rgba(0, 0, 0, 0.57);
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
top: 26px;
height: 36px;
left: 50px;
opacity: 0;
padding: 10px;
position: absolute;
width: 36px;
}
.box:hover .toggleIcon {
opacity: 1;
left: 15px;
transition: all 0.25s ease 0s;
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/openIcon.png');
}
.box.full .toggleIcon {
opacity: 1;
left: 50px;
top: 26px;
border-radius: 0;
background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/closeIcon.png');
background-size: 55%;
}
.box.full .toggleIcon:hover {
background-color: black;
transition: all 0s ease 0;
}
#gridGallery > .row {
margin: 0;
}
@media (max-width: 1200px) {
.full {
width: 970px;
}
}
@media (max-width: 992px) {
.full {
width: 750px;
}
}
@media (max-width: 768px) {
#boxThree,
#boxFour,
#boxFive,
#boxSix {
height: 300px;
}
.toggleIcon {
display: none;
}
.full .captionBox {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
padding: 10px;
}
.full .captionBox p {
display: none;
}
.full .captionBox h3 {
margin-bottom: 0;
}
.box.full {
height: inherit;
width: 100%;
}
.box {
max-height: 150px !important;
}
#gridGallery .row {
background-color: transparent;
}
#gridH .row {
margin-top: 0px;
}
.box.full .toggleIcon {
height: 50px !important;
left: 0 !important;
top: 0 !important;
width: 50px !important;
display: block;
}
.mobileFunction {
float: left;
height: 150px;
width: 100%;
}
/* SHAREPOINT ONLY */
}</style></head><body>
<section id="gridGallery">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-6 box" id="boxOne">
<div class="toggleIcon"></div>
<div class="col-sm-6 captionBox hiddenText">
<h3>Here is some text</h3>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
</div>
</div>
<div class="col-sm-3 col-xs-6 box" id="boxTwo">
<div class="toggleIcon"></div>
<div class="col-sm-6 captionBox hiddenText">
<h3>Here is some text</h3>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
</div>
</div>
<div class="col-sm-3 col-xs-6 box" id="boxThree">
<div class="toggleIcon"></div>
<div class="col-sm-6 captionBox hiddenText">
<h3>Here is some text</h3>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
</div>
</div>
<div class="col-sm-3 col-xs-6 box" id="boxFour">
<div class="toggleIcon"></div>
<div class="col-sm-6 captionBox hiddenText">
<h3>Here is some text</h3>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
</div>
</div>
<div class="col-sm-6 col-xs-6 pull-right box" id="boxEight">
<div class="toggleIcon"></div>
<div class="col-sm-6 captionBox hiddenText">
<h3>Here is some text</h3>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
</div>
</div>
<div class="col-sm-3 col-xs-6 pull-right box" id="boxSeven">
<div class="toggleIcon"></div>
<div class="col-sm-6 captionBox hiddenText">
<h3>Here is some text</h3>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
</div>
</div>
<div class="col-sm-3 col-xs-6 box" id="boxFive">
<div class="toggleIcon"></div>
<div class="col-sm-6 captionBox hiddenText bottomRight">
<h3>Here is some text</h3>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
</div>
</div>
<div class="col-sm-3 col-xs-6 box" id="boxSix">
<div class="toggleIcon"></div>
<div class="col-sm-6 captionBox hiddenText bottomRight">
<h3>Here is some text</h3>
<p>Fixie banh mi blog, YOLO sriracha roof party mumblecore post-ironic. Keytar 90's cornhole drinking vinegar deep v, VHS messenger bag Pinterest. Etsy farm-to-table Intelligentsia Thundercats, pork belly vegan authentic single-origin coffee dreamcatcher
bespoke master cleanse street art art party.</p>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.container-->
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(document).ready(function() {
$(".box").on("click", function() {
$(this).siblings().toggleClass("hidden");
$(this).toggleClass("full");
$(".captionBox").toggleClass("hiddenText");
$(this).children().animate({
opacity: "1"
}, 500, function() {});
});
if ($(window).width() < 768) {
$(".box").on("click", function() {
$("#gridGallery").toggleClass("mobileFunction");
});
}
if ($(window).width() >= 768) {
$(".box").hover(function() {
$(this).siblings().toggleClass("opacity");
});
}
$(".horizontal").click(function() {
$(this).toggleClass("full");
$(".captionBox").toggleClass("hiddenText");
$(this).children().animate({
opacity: "1"
}, 500, function() {});
});
$(".horizontal").hover(function() {
$(this).siblings().toggleClass("opacity");
});
});
//# sourceURL=pen.js
</script>
</body></html>
