What is the best way to position a title at the bottom center of each image within my grid gallery?

I'm struggling to find a way to position a title at the bottom of each image in my grid gallery, right in the center of the photo with a light-gray background. I want the text to be fully visible regardless of the image used. Currently, I can only put text below the images but not on them. Any help would be greatly appreciated! Here is the code I have so far:

body {
  margin: 0
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  background: rgb(255, 255, 255);
  padding: 15px;
}

.container img {
  width: 80%;
  display: block;
  background-color: cornflowerblue;
  border-radius: 12%;
}

.container img:hover {
  transform: scale(1.04);
}

h2,
p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}

.overlay {
  position: absolute;
  bottom: 10px;
  left: 19px;
  font-size: 13px;
}
<div class="container">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
  <img src="placeholder-image.png" alt="photo">
</div>

htmlcsscss-grid

Answer №1

Place your images inside a figure element and include a figcaption for accompanying text.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

figure {
  position: relative;
  display: flex;
  justify-content: center;
}

figcaption {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, .2);
  padding: 5px;
}

img {
  width: 80%;
  display: block;
}
<div class="gallery">

  <figure>
    <img src="http://i.imgur.com/60PVLis.png" alt="">
    <figcaption>text text text</figcaption>
  </figure>

  <figure>
    <img src="http://i.imgur.com/60PVLis.png" alt="">
    <figcaption>text text text</figcaption>
  </figure>

  <figure>
    <img src="http://i.imgur.com/60PVLis.png" alt="">
    <figcaption>text text text</figcaption>
  </figure>

  <figure>
    <img src="http://i.imgur.com/60PVLis.png" alt="">
    <figcaption>text text text</figcaption>
  </figure>

  <figure>
    <img src="http://i.imgur.com/60PVLis.png" alt="">
    <figcaption>text text text</figcaption>
  </figure>

</div>

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

scraping mixed content from an HTML span using Selenium and XPath

Currently, I am attempting to extract information from a span element that contains various content. <span id="span-id"> <!--starts with some whitespace--> <b>bold title</b> <br/> text here that I want to grab.... < ...

htmlseleniumselenium-webdriverxpath

The peculiar effect of a CSS element's border on surrounding elements is quite unusual

I'm experiencing a strange issue that I can't quite figure out. To demonstrate the problem, I've created a fiddle. What's puzzling me is why applying a border to one of the three canvases causes my other two .headerMainDiv elements to ...

htmlcsscss-position

Adjust the text placement on the toggle switch to turn it On or Off

I am looking to create a toggle switch with a small size. I found some code on Stack Overflow that I tried but it didn't work as expected. The code snippet I attempted to use is from another helpful post. My goal is to have the "on" text align to th ...

htmlcss

Try using Bootstrap 4 Carousel columns instead of the traditional carousel-item

Is it possible to use Bootstrap to display grid columns or rows within a Carousel instead of carousel-items? The concept involves having intricate grid column structures that rotate like carousel-items. For instance, if we have the following grid: <div ...

csstwitter-bootstrapbootstrap-4

Experiencing repeated triggering of ng-change on 'range' input in Chrome

When the range input is changed by sliding, the ng-change function continues to be triggered repeatedly until another element is clicked. This issue seems to occur only in the Chrome browser. You can view an example on this fiddle. Try sliding the element ...

angularjshtmlrangeangularjs-ng-change

Bringing in Unique Fonts with Flask and Tailwind CSS

I'm currently developing a web application using Flask and Tailwind CSS, but I am facing an issue with importing custom fonts. Despite successfully building the CSS file, the HTML template fails to display the font as intended. How can I ensure that m ...

pythonhtmlflaskjinja2tailwind-css

Generate a text input field within a dropdown menu

Below is an example of my basic HTML code for a drop-down list: <span id="Div_List"> <label for="Gender">For:</label> <select name="Gender" id="Sex"> <option value="1">1000mtr</option> <option val ...

javascriptjqueryhtml

Try utilizing querySelectorAll() to target the second item in the list

As I delve into the world of HTML and JS, I came across the document.querySelectorAll() API. It allows me to target document.querySelectorAll('#example-container li:first-child'); to select the first child within a list with the ID 'exampl ...

javascripthtmlcssdom

customizable path settings for sprites using css

Currently, I have a situation where I am using many sprites in my CSS file, and all the image locations are hardcoded within the CSS itself. Now, I am considering moving all these images to a CDN. The problem is that it's quite cumbersome to change th ...

pythoncssdjango

Ways to display a Tooltip automatically without needing to hover using only CSS

I have a tooltip that is set to appear when we hover over the div element, Is there a way to display the tooltip automatically when the page is refreshed without using Javascript? I am looking for a solution in pure CSS only. I attempted to remove displa ...

javascripthtmlcsstooltip

Chrome Bug with Fixed Position Background

Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I&ap ...

htmlcssgoogle-chromescroll

Instructions on placing the bottom of an inline-block element flush with the bottom of a block element

In the scenario where I have the following HTML and CSS code: .something{ width: 200px; } .display-block { display: block; } .req-field{ float: right; font-size: 5px; } <div class="something"> <span class="display-block">First name ...

htmlcss

The grid is out of alignment, causing elements to jump to the next row

After taking an online course at TreeHouse, I used the provided HTML & CSS code and made some adjustments to create a layout with 10 columns instead of the original 12 within a 1000px container. The columns were converted to percentages to fit my needs. I ...

htmlcssgridfluid

Tips for effectively deleting a flash object from an HTML page

I recently created a website with AJAX (using jquery) for navigation purposes. The pages on the site slide smoothly, and I have been using remove() to get rid of the old page. Everything was working fine until I encountered an issue where the browser cras ...

jqueryhtmlflashcrash

What is the best way to insert an anchor tag into text using React?

I am working with a variable const linkElement = `Hey this is a link ${<a href="www.google.com">Click me!</a>} that can be clicked}` Currently, it displays as Hey this is a link [Object object] that can be clicked. Is there a way to ...

javascripthtmlreactjs

The Art of Determining the Text's Baseline

My goal is to create a test that determines whether the text rendered inside an <input> has the same baseline as a label: To achieve this, I want to calculate the baseline of the rendered text in each element and compare their values. Is it possible ...

javascripthtmlcssbaseline

Tips on positioning images to the left and right without causing text to wrap around them

I have successfully floated an image to the left of text with the following CSS. How can I achieve a similar effect with an image to the right of text on the same page? Do I need to use a clearfix between the left and right images? Thank you! .innercont ...

htmlcssimagecss-float

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

javascripthtmltypescriptfigmafigma-api

What is the best way to align a center column of a precise width that is responsive to different screen

As much as I hate to ask for help with a "how do I do this" question, I'm at my wit's end trying to figure it out on my own. I'm working on a page layout that requires a center column of exactly 960px width to be horizontally centered on th ...

csshtmllayouttwitter-bootstrap-3

Changing the look of your website with PHP and a drop-down selection bar

Recently, I implemented a drop-down menu that allows users to choose a theme for the website. While this feature works fine, I'm facing difficulty in loading the selected theme upon pressing the "Apply" button as I am fairly new to PHP. I am aware tha ...

phpcssformsdrop-down-menucookies