Gutterless Feature Grid

Developer
John Urbank
Size
3,013 Kb
Views
42,504
  1. Gutterless Feature Grid Previews
  2. Gutterless Feature Grid HTML Codes
  3. Gutterless Feature Grid CSS Codes

How do I make an gutterless feature grid?

What is a gutterless feature grid? How do you make a gutterless feature grid? This script and codes were developed by John Urbank on 08 July 2022, Friday.

Gutterless Feature Grid Previews
IQ Test

Gutterless Feature Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gutterless Feature Grid</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* BG, RESET, CENTER
-------------------*/
body { background: #E8E8E8;
}
ul { position: absolute; top: 50%; left: 50%; padding: 0; margin: 0; list-style: none; transform: translate(-50%, -50%);
}
/* COLORS
-------------------*/
.brick-color-01 .brick__caption,
.brick-color-01 .brick__caption--hover { background: rgba(217, 164, 47, .85);
}
.brick-color-02 .brick__caption,
.brick-color-02 .brick__caption--hover { background: rgba(37, 156, 183, .85);
}
.brick-color-03 .brick__caption,
.brick-color-03 .brick__caption--hover { background: rgba(162, 192, 47,.85);
}
.brick-color-04 .brick__caption,
.brick-color-04 .brick__caption--hover { background: rgba(88, 88, 90, .85);
}
/* BRICKS
-------------------*/
.bricks { margin: 0 auto; width: 90%; max-width: 1060px;
}
.brick:after { content: ""; display: table; clear: both;
}
.brick { background-position: center; background-size: cover; background-image: url('http://placehold.it/600x600'); float: left; width: 50%;
}
@media (min-width: 767px) { .brick { width: 25%; }
}
.brick__link { display: block; position: relative; height: 228px; width: 100%; overflow: hidden; color: #fff; text-decoration: none; font-family: helvetica;
}
.brick:hover .brick__caption { opacity: 0;
}
.brick:hover .brick__caption--hover { opacity: 1;
}
.brick__caption,
.brick__caption--hover{ position: absolute; width: 100%; bottom: 0; background: #333; display: block; transition: opacity .3s;
}
.brick__caption--hover { opacity: 0; height: 100%; transition: opacity .3s;
}
.brick__title,
.brick__copy { padding: 15px; margin: 0;
}
.brick__title { width: 100%; font-family: helvetica; font-size: 16px;
}
.brick__copy { padding-top: 0; font-family: georgia; font-size: 23px; font-weight: lighter;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="bricks"> <li class="brick brick-color-01" style="background-image: url('http://lorempixel.com/400/402/');"> <a href="" class="brick__link"> <div class="brick__caption"> <p class="brick__title">LOREM <strong>IPSUM</strong></p> </div> <div class="brick__caption--hover"> <p class="brick__title">LOREM <strong>IPSUM</strong></p> <p class="brick__copy"><i>rich and bold colors that reflect the beauty of nature.</i></p> </div> </a> </li> <li class="brick brick-color-02" style="background-image: url('http://lorempixel.com/400/404/');"> <a href="" class="brick__link"> <div class="brick__caption"> <p class="brick__title">LOREM <strong>IPSUM</strong></p> </div> <div class="brick__caption--hover"> <p class="brick__title">LOREM <strong>IPSUM</strong></p> <p class="brick__copy"><i>rich and bold colors that reflect the beauty of nature.</i></p> </div> </a> </li> <li class="brick brick-color-03" style="background-image: url('http://lorempixel.com/400/411/');"> <a href="" class="brick__link"> <div class="brick__caption"> <p class="brick__title">LOREM <strong>IPSUM</strong></p> </div> <div class="brick__caption--hover"> <p class="brick__title">LOREM <strong>IPSUM</strong></p> <p class="brick__copy"><i>rich and bold colors that reflect the beauty of nature.</i></p> </div> </a> </li> <li class="brick brick-color-04" style="background-image: url('http://lorempixel.com/400/409/');"> <a href="" class="brick__link"> <div class="brick__caption"> <p class="brick__title">LOREM <strong>IPSUM</strong></p> </div> <div class="brick__caption--hover"> <p class="brick__title">LOREM <strong>IPSUM</strong></p> <p class="brick__copy"><i>rich and bold colors that reflect the beauty of nature.</i></p> </div> </a> </li>
</ul>
</body>
</html>

Gutterless Feature Grid - Script Codes CSS Codes

/* BG, RESET, CENTER
-------------------*/
body { background: #E8E8E8;
}
ul { position: absolute; top: 50%; left: 50%; padding: 0; margin: 0; list-style: none; transform: translate(-50%, -50%);
}
/* COLORS
-------------------*/
.brick-color-01 .brick__caption,
.brick-color-01 .brick__caption--hover { background: rgba(217, 164, 47, .85);
}
.brick-color-02 .brick__caption,
.brick-color-02 .brick__caption--hover { background: rgba(37, 156, 183, .85);
}
.brick-color-03 .brick__caption,
.brick-color-03 .brick__caption--hover { background: rgba(162, 192, 47,.85);
}
.brick-color-04 .brick__caption,
.brick-color-04 .brick__caption--hover { background: rgba(88, 88, 90, .85);
}
/* BRICKS
-------------------*/
.bricks { margin: 0 auto; width: 90%; max-width: 1060px;
}
.brick:after { content: ""; display: table; clear: both;
}
.brick { background-position: center; background-size: cover; background-image: url('http://placehold.it/600x600'); float: left; width: 50%;
}
@media (min-width: 767px) { .brick { width: 25%; }
}
.brick__link { display: block; position: relative; height: 228px; width: 100%; overflow: hidden; color: #fff; text-decoration: none; font-family: helvetica;
}
.brick:hover .brick__caption { opacity: 0;
}
.brick:hover .brick__caption--hover { opacity: 1;
}
.brick__caption,
.brick__caption--hover{ position: absolute; width: 100%; bottom: 0; background: #333; display: block; transition: opacity .3s;
}
.brick__caption--hover { opacity: 0; height: 100%; transition: opacity .3s;
}
.brick__title,
.brick__copy { padding: 15px; margin: 0;
}
.brick__title { width: 100%; font-family: helvetica; font-size: 16px;
}
.brick__copy { padding-top: 0; font-family: georgia; font-size: 23px; font-weight: lighter;
}
Gutterless Feature Grid - Script Codes
Gutterless Feature Grid - Script Codes
Home Page Home
Developer John Urbank
Username jurbank
Uploaded July 08, 2022
Rating 4.5
Size 3,013 Kb
Views 42,504
Do you need developer help for Gutterless Feature 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!

John Urbank (jurbank) Script Codes
Name
A Pen by John Urbank
Diagonal CSS Pattern
String permutation
Time is Money
Canvas Geometry
CSS Loading Animation
Lego style loading text
Simple jQuery Slider
Tape Cassette Icon - CSS Only
Traveling through Tron - Best viewed in Webkit
Create amazing sales emails 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!