Simple image grid using percentages.
Created
January 14, 2015 01:35
-
-
Save pbrocks/796c57cfc5641e2a02e3 to your computer and use it in GitHub Desktop.
Simple Responsive Image Grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Images sourced from Wikimedia Commons http://commons.wikimedia.org/wiki/Main_page --> | |
<div class="imageGrid"> | |
<div class="tile" style="background-image: url('http://bit.ly/1tSEfja');"> | |
<div class="textWrapper"><h2>Pont de Bir-Hakeim, Paris</h2> | |
<div class="content">The western part of the Pont de Bir-Hakeim seen at night. Buildings of the 16th arrondissement of Paris are visible in the background.</div> | |
</div> | |
</div><!-- | |
--><div class="tile" style="background-image: url('http://bit.ly/1rXAWHn');"> | |
<div class="textWrapper"><h2>Wiesen Viaduct, Switzerland</h2> | |
<div class="content">A RhB Ge 4/4 II with a push–pull train crosses the Wiesen Viaduct between Wiesen and Filisur, Switzerland.</div> | |
</div> | |
</div><!-- | |
--><div class="tile" style="background-image: url('http://bit.ly/1k3JsEi');"> | |
<div class="textWrapper"><h2>Office building, Germany</h2> | |
<div class="content">Office building of the LVM Insurance in Munster (Westphalia), Germany.</div> | |
</div> | |
</div><!-- | |
--><div class="tile" style="background-image: url('http://bit.ly/Ux98xe');"> | |
<div class="textWrapper"><h2>Maya Beach, Thailand</h2> | |
<div class="content">Long-tail boats in Maya Beach, Ko Phi Phi Lee, Thailand.</div> | |
</div> | |
</div><!-- | |
--><div class="tile" style="background-image: url('http://bit.ly/1nR24qx');"> | |
<div class="textWrapper"><h2>Chi Minh City, Vietnam.</h2> | |
<div class="content">Night view of Ho Chi Minh City from Bitexco Financial Tower, Vietnam.</div> | |
</div> | |
</div><!-- | |
--><div class="tile" style="background-image: url('http://bit.ly/1oAM0tK');"> | |
<div class="textWrapper"><h2>Porto City Hall, Portugal</h2> | |
<div class="content"></div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.imageGrid { | |
line-height: 0; | |
} | |
.imageGrid .tile { | |
width:33.33%; | |
min-height:20em; | |
line-height: 1.2; | |
display:inline-block; | |
background-size: cover; | |
background-position: center center; | |
background-repeat: no-repeat; | |
overflow: hidden; | |
position: relative; | |
color:#fff; | |
font-family:"Verdana",sans-serif; | |
text-shadow: 2px 2px 2px #000; | |
cursor: pointer; | |
cursor: hand; | |
} | |
.imageGrid .tile:before { | |
content: ''; | |
background-color: rgba(15,15,15,0.5); | |
display: block; | |
width: 100%; | |
height: 100%; | |
z-index: 0; | |
position: absolute; | |
} | |
.imageGrid .tile:hover:before { | |
display: none; | |
} | |
.imageGrid .tile .textWrapper { | |
text-align: center; | |
vertical-align: middle; | |
width: 80%; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
font-size: .75em; | |
} | |
.imageGrid .tile .textWrapper .content { | |
display: none; | |
} | |
.imageGrid .tile:hover .textWrapper .content { | |
display: block; | |
} | |
.imageGrid .tile:hover .textWrapper .content h2 { | |
margin: 0; | |
} | |
@media (max-width: 1000px) { | |
.imageGrid .tile { | |
width: 50%; | |
} | |
} | |
@media (max-width: 700px) { | |
.imageGrid .tile { | |
width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment