See-through covering over adaptable square patterns

I'm looking to create responsive square image grids, each containing 9 images.

Currently, I have utilized a basic bootstrap grid layout to design these grids:

div class="col-md-4">
    <img class="home_images" src="#image*" style="height:25%; width:27%">
    <!--Nine more similar images-->
</div>

I am in need of adding a gray semi-transparent overlay square on top (using absolute positioning) of each grid to incorporate h2 text at the center of each one. However, as the grids do not have a fixed height, I am unsure how to proceed with this. Any suggestions?

https://i.sstatic.net/aUE6f.png

htmlcsstwitter-bootstraplayouttwitter-bootstrap-3

Answer №1

Is this what you're looking for?

<!DOCTYPE HTML>
<html>
<head>
  <style>
    body {
      height: 100%;
      display: flex;
      justify-content: center;
    }
    
    .grid {
      width: 80%;
      height: 100%;
      border: 1px solid red;
      position: relative;
    }
    
    .row {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    
    .item {
      width: 30%;
      height: 100px;
      border: 1px solid blue;
    }
    
    .grid:after {
      content: "Heading Two Title"; /*allow to show up*/
      width: 100%;
      height: 100%; /*cover grid area*/
      position: absolute;
      top: 0;
      left: 0; /*make it stay on the grid*/
      background-color: #a0a0a0; /*instead of opacity choose a light gray color*/
      z-index: -1; /*place behind so as not to cover the grid elements*/
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3em; /*make as big as needed*/
    }
  </style>
</head>

<body>
  <div class="grid">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div><!-- /grid -->
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Assistance with themed implementation for single-page web applications in JavaScript

My goal is to incorporate theme support into my single page application. The catch is that the theme change needs to be done locally through JavaScript without making any server calls, in order to work in offline mode. Since I am using angularjs, the HTML ...

javascriptcssthemesangularjs

What is the best way to eliminate unexplained spacing at the bottom of a webpage using CSS?

I am struggling to create a basic webpage using Bootstrap and D3, and I can't seem to figure out how to remove the excess whitespace at the bottom. Any tips on how to resolve this issue would be greatly appreciated. I attempted to set the min-height ...

cssd3.jsbootstrap-5whitespace

What methods can I utilize to transmit Global variable data from a view to a controller?

In my Angular view file, I have the following code snippet. <!DOCTYPE html> <video id="myVideo" class="video-js vjs-default-skin"></video> <script> var dataUri; var videoData; var player = videojs("myVideo", { controls ...

javascriptangularjshtml

Is there a way to use JavaScript or jQuery to automatically convert HTML/CSS files into PDF documents?

While using OS X, I noticed that in Chrome I have the option to Save as PDF in the print window by setting the destination to "Save as PDF". Is this feature available on Windows? Is there a way to easily save to PDF with just one click? How can I access t ...

javascriptjqueryhtmlcsspdf

Creating an array with checkboxes alongside key values can be achieved by following these steps in JavaScript

I'm looking for assistance in creating an array that can be passed via ajax to a PHP page. Here is the HTML code snippet: $(document).ready(function() { $('.p_options').change(function() { if ($(this).is(":checked")) { $(this ...

javascriptjqueryhtmlarraysajax

Creating a wide mega dropdown menu using Bootstrap 5.2 for a full-width page

I am attempting to create a Bootstrap 5.2 Mega Menu with a full page-wide background, but I am encountering some challenges. Here is my basic navigation setup: <nav class="navbar navbar-expand"> <div class="container-fluid" ...

htmlcsstwitter-bootstrapbootstrap-5

Web server experiencing issues with loading scripts and CSS files

After successfully building my project using CodeIgniter on localhost, I encountered an issue when trying to run it on a webhost. The site was functional but the design elements such as scripts and stylesheets were not loading properly. Before uploading t ...

javascriptphpcsscodeigniter

Is there a way to segment users based on their user-agent information?

This division is aimed at users accessing it from iPhone, iPod Touch, and all Android devices except for iPad (and other wide width Tablets). How can I make sure to exclude iPad (and other wide width Tablets) from this? <% if(ua.include?('Mobile& ...

javascripthtmlruby-on-rails-3

Tips for transferring a data table (an object) from a JavaScript file to Node.js

On my HTML page, there is a table displaying student names and information, along with controls to manage the table. I created a save button to save this table as an object named SIT in my JavaScript code. I was able to manually save this table in MongoDB ...

javascripthtmlnode.jsexpressejs

What is the best way to design a card featuring a circular image and text using HTML and CSS?

As a novice in the field, I am currently honing my skills in HTML and CSS. The practice project involves replicating the card shown below. https://i.sstatic.net/VbmA4.png I would greatly appreciate any guidance on how to create this type of card using jus ...

htmlcssfont-awesome

SASS malfunctioning, error messages popping up in command prompt while running gulp serve

As I develop a web app using AngularJS and Gulp, I encounter an issue where the CSS does not seem to work when running 'gulp serve'. Despite attempting to reinstall various components like node_modules, Node.js, and Gulp, the same error persists. ...

cssangularjssassgulp

Could someone please assist me in figuring out the issue with my current three.js code that is preventing it from

Recently, I decided to delve into learning three.js and followed the getting started code on the official documentation. However, I encountered a frustrating issue where the scene refused to render, leaving me completely perplexed. Here is my index.html: ...

javascripthtmlthree.js

Display dropdown with multiple lists using LocalStorage

I'm facing an issue with displaying a list in a dropdown multiple using LocalStorage. The problem arises after saving data to LocalStorage and then going back to my modal. The saved list does not show up in the dropdown. I simply want to display the l ...

javascripthtml

Utilizing the float: left property for creating additional spacing in a responsive CSS layout

My frustration levels are off the charts as I struggle to understand why this code refuses to cooperate. As I work on setting up my personal website, I want everything to be perfectly responsive before I even think about adding my content. One major headac ...

cssresponsivespace

The footer seems to be malfunctioning

Let's start with the code: CSS: *{ margin:0; padding:0; } body,html{ height:100%; } body{ background:url('../images/bg.png'); background-position:center; background-repeat:no-repeat; background-attachment:fixed; height:100%; ...

htmlcss

Setting a fixed data value within a div for subsequent retrieval through a function

I found a helpful example that demonstrates how to convert numbers into words. You can check it out here. The function for converting numbers into words is implemented in the following HTML code: <input type="text" name="number" placeholder="Number OR ...

javascriptjqueryhtml

Creating a mat-grid-list using Angular Material involves adding the necessary dependencies and components

I am encountering an issue while attempting to set up a mat-grid-list with Angular Material. Unfortunately, nothing is displaying on my page. Here is the component info-section : <div class="mat-grid-list" cols="4" rowHeight="1 ...

htmlangularangular-material

Aligning an Image Vertically

I'm working with a document structure that includes an unordered list containing div elements with images inside. The images have a set height of 150px, but sometimes the images are smaller than that. Is there a way to vertically position the images w ...

htmlcss

Create a grid layout using Bootstrap and Vue that features responsive columns which resemble a snake pattern. The alternate rows should be displayed in reverse order for a visually dynamic

Having a bit of a tricky situation here, hoping someone can provide some insight. I am currently working on a project using Laravel, Vue, and Bootstrap where I need to loop through some objects and display them in a specific pattern. 1 2 3 6 5 4 7 8 9 Th ...

twitter-bootstrapvue.jslayout

At times, the CSS fails to load at first and does not refresh correctly when using F5 or CTRL F5, yet it occasionally loads when clicking on links

After dedicating a full day to trying to solve this issue, I am reaching out for some assistance. As a newcomer here, I apologize if this question has been asked before (I did search extensively and found nothing). The website I'm constructing for my ...

csscachinghtml-parsingloading