Responsive Image Grid with set Height

Developer
Richard
Size
2,343 Kb
Views
40,480
  1. Responsive Image Grid with set Height Previews
  2. Responsive Image Grid with set Height HTML Codes
  3. Responsive Image Grid with set Height CSS Codes

How do I make an responsive image grid with set height?

Responsive image grid which keeps a persistant height.. What is a responsive image grid with set height? How do you make a responsive image grid with set height? This script and codes were developed by Richard on 02 August 2022, Tuesday.

Responsive Image Grid with set Height Previews
IQ Test

Responsive Image Grid with set Height - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Image Grid with set Height</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Images sourced from Wikimedia Commons http://commons.wikimedia.org/wiki/Main_page -->
<div class="imageGridPercentage"> <div class="tile" style="background-image: url('http://bit.ly/1teOEsr');"> <div class="textWrapper"><h2>Pavlovsk Park, Saint Petersburg</h2> <div class="content">Temple of Friendship in Pavlovsk Park in Saint Petersburg.</div> </div> </div><!--
--><div class="tile" style="background-image: url('http://bit.ly/1u07sbK');"> <div class="textWrapper"><h2>Grey crowned crane</h2> <div class="content">Balearica regulorum</div> </div> </div><!--
--><div class="tile" style="background-image: url('http://bit.ly/1AXC169');"> <div class="textWrapper"><h2>Saxony, Germany</h2> <div class="content">Bastei bridge in the Elbe Sandstone Mountains.</div> </div> </div><!--
--><div class="tile" style="background-image: url('http://bit.ly/1vqesCL');"> <div class="textWrapper"><h2>Streetseller, India</h2> <div class="content">Indian streetseller hands selling green chickpeas.</div> </div> </div><!--
--><div class="tile" style="background-image: url('http://bit.ly/1zL4kCl');"> <div class="textWrapper"><h2>Shirakawa-go, Japan</h2> <div class="content">Traditional Japanese village showcasing a building style known as gasshō-zukuri.</div> </div> </div><!--
--><div class="tile" style="background-image: url('http://bit.ly/1q8nfWt');"> <div class="textWrapper"><h2>Ferronor GR12U 412, Chile</h2> <div class="content">Ferronor GR12U 412 on the gradient between Montadon and Codelcos Potrerillos plant.</div> </div> </div>
</div>
</body>
</html>

Responsive Image Grid with set Height - Script Codes CSS Codes

.imageGridPercentage { line-height: 0; height: 40em;
}
.imageGridPercentage .tile { width:33.33%; height:50%; 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;
}
.imageGridPercentage .tile:before { content: ''; background-color: rgba(15,15,15,0.5); display: block; width: 100%; height: 100%; z-index: 0; position: absolute;
}
.imageGridPercentage .tile:hover:before { display: none;
}
.imageGridPercentage .tile .textWrapper { text-align: center; vertical-align: middle; width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .75em;
}
.imageGridPercentage .tile .textWrapper .content { display: none;
}
.imageGridPercentage .tile:hover .textWrapper .content { display: block;
}
.imageGridPercentage .tile:hover .textWrapper .content h2 { margin: 0;
}
@media (max-width: 800px) { .imageGridPercentage .tile { width: 100%; height: 16.7%; } .imageGridPercentage .tile .content{ display: none!important; }
}
Responsive Image Grid with set Height - Script Codes
Responsive Image Grid with set Height - Script Codes
Home Page Home
Developer Richard
Username Ketziel
Uploaded August 02, 2022
Rating 3
Size 2,343 Kb
Views 40,480
Do you need developer help for Responsive Image Grid with set Height?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Richard (Ketziel) Script Codes
Name
Simple Responsive Image Grid
Flex Box Tiles
A Pen by Richard
CSS Icon Collection
CSSman
Colour Schemes
Animated Book
CSS Plus Sign
Atomic
CSS Styled Select Box
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!