Simple Responsive Image Grid

Developer
Richard
Size
2,397 Kb
Views
48,576
  1. Simple Responsive Image Grid Previews
  2. Simple Responsive Image Grid HTML Codes
  3. Simple Responsive Image Grid CSS Codes

How do I make an simple responsive image grid?

Simple image grid using percentages.. What is a simple responsive image grid? How do you make a simple responsive image grid? This script and codes were developed by Richard on 02 August 2022, Tuesday.

Simple Responsive Image Grid Previews
IQ Test

Simple Responsive Image Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Responsive Image Grid</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- 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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Simple Responsive Image Grid - Script Codes CSS Codes

.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%; }
}
Simple Responsive Image Grid - Script Codes
Simple Responsive Image Grid - Script Codes
Home Page Home
Developer Richard
Username Ketziel
Uploaded August 02, 2022
Rating 3
Size 2,397 Kb
Views 48,576
Do you need developer help for Simple Responsive Image Grid?

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
Atomic
Flex Box Tiles
CSS Icon Collection
A Pen by Richard
CSS Plus Sign
Animated Book
CSSman
Moon Orbit
Colour Schemes
CSS Styled Select Box
Create amazing marketing copy 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!