I am working on a site for a client and want to have an image grid with of areas that will show an image of the area and link to that page.
I can’t seem to get the overlay to stop extending outside the box and across the page and I can’t get it to actually stack in any format other than one per row, full width.
HTML & CSS below.
Any help would be super appreciated, I’ve been at this 2 days and it’s starting to drive me nuts.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test2</title>
<meta name="description">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="row kw-listing-neigh clearfix">
<div class="col-6 col-md-4">
<h3>Area Info</h3>
<p>Learn about these popular areas in the Greater Vancouver area to find out if this is where you want to call home.</p>
</div>
</div>
<div class="row clearfix">
<div class="col-6 col-md-4">
<article class="kw-listing-single" id="kwListing">
<div class="kw-listing-image">
<a href="properties.php?filter=WestVancouver">
<div id="darkoverlay">Vancouver West</div>
<img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" alt="West Vancouver">
</a>
</div></article>
<article class="kw-listing-single" id="kwListing">
<div class="kw-listing-image">
<a href="properties.php?filter=NorthVancouver">
<div id="darkoverlay">North Vancouver</div>
<img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" alt="North Vancouver">
</a>
</div>
</article>
</div>
<div class="col-6 col-md-4">
<article class="kw-listing-single" id="kwListing">
<div class="kw-listing-image">
<a href="properties.php?filter=Vancouver">
<div id="darkoverlay">Vancouver East</div>
<img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" alt="East Vancouver">
</a>
</div>
</article>
</div>
<div class="col-6 col-md-4">
<article class="kw-listing-single" id="kwListing">
<div class="kw-listing-image">
<a href="properties.php?filter=Burnaby">
<div id="darkoverlay">Burnaby</div>
<img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" alt="Burnaby">
</a>
</div>
</article>
<article class="kw-listing-single" id="kwListing">
<div class="kw-listing-image">
<a href="properties.php?filter=Richmond">
<div id="darkoverlay">Richmond</div>
<img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" alt="Richmond">
</a>
</div>
</article>
</div>
</div>
</div>
</body>
</html>
/****** Home start ******/
*, ::after, ::before {
box-sizing: border-box;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h3 {
color: #b40101;
font-size: 48px;
}
.kw-listing-single{
position:relative;
margin-bottom:20px;
}
.col-6 col-md-4 {
-webkit-box-flex: 0;
flex: 0 0 50%;
max-width: 50%;
}
.col-6 col-md-4 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left:15px;
}
/*
.kw-listing-info {
position: absolute;
left: 0px;
width: 0;
height: 0;
top: 0px;
background-color: rgba(241, 241, 241, .7);
color: #ffffff;
font-size: 29px;
font-weight: 800;
line-height: 34.59px;
letter-spacing: 0.85px;
display: table-cell;
-webkit-display: flex;
-moz-display: flex;
-o-display: flex;
vertical-align: middle;
align-items: center;
opacity: 0;
transition: .3s ease;
justify-content: center;
}
.kw-listing-single:hover >.kw-listing-info{
width: 100%;
height: 100%;
opacity: 1;
transition: .3s ease;
*/
}
.kw-listing-neigh{
padding-bottom:90px;
color: #4a4a4a;
letter-spacing: 0.76px;
}
.row-kw-listing-neigh.clearfix::after {
content: "";
clear: both;
display: block;
}
.row.clearfix ::after {
content: "";
clear:both;
display: block;
}
div {
display: block;
}
.kw-listing-neigh h3{
color: #b40101;
font-size: 30px;
font-weight: 800;
line-height: 32.45px;
margin-bottom:0px;
letter-spacing: 1.14px;
}
.listings-neighbourhood{
margin-bottom: 80px;
}
.kw-listing-image::after, ::before {
box-sizing: border-box;
}
}
.kw-resource-heading{
margin-bottom:70px;
}
.kw-resource-heading h3{
color: #b40101;
font-size: 30px;
font-weight: 900;
margin-bottom: 0px;
letter-spacing: 0.3px;
}
.kw-resources-area {
margin-bottom: 200px;
}
.kw-resource-info {
position: absolute;
left: 0px;
height: 100%;
width: 100%;
top: 0px;
display: flex;
-webkit-display: flex;
-moz-display: flex;
-o-display: flex;
align-items: center;
text-align: center;
justify-content: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-moz-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-webkit-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-o-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
color: #ffffff;
font-family: "League Spartan";
font-size: 45px;
font-weight: 700;
letter-spacing: 0.45px;
}
#darkoverlay{
position: absolute;
left: 0px;
width: 0;
height: 0;
top: 0px;
color: #ffffff;
font-size: 29px;
font-weight: 800;
line-height: 34.59px;
letter-spacing: 0.85px;
text-shadow: 2px 2px 3px black;
display: flex;
-webkit-display: flex;
-moz-display: flex;
-o-display: flex;
vertical-align: middle;
align-items: center;
opacity: 0;
transition: .3s ease;
justify-content: center;
min-width: 100%;
max-width: 100%;
height: 100%;
background: rgba(0,0,0,0);
position: absolute;
float: left;
transition:All 0.2s ease-in-out;
-webkit-transition:All 0.2s ease-in-out;
-moz-transition:All 0.2s ease-in-out;
-o-transition:All 0.2s ease-in-out;
}
#darkoverlay:hover {
background: rgba(0,0,0,0.5);
opacity: 1;
}
@media only screen and (max-width: 767px) {
.kw-listing-neigh h3{
font-size:25px;
}
.kw-listing-neigh{
padding-bottom:20px;
}
.kw-listing-info{
font-size:18px;
padding:20px;
line-height:1.2
}
}
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}