Steps for eliminating the overlay on top of the padding region

My current code includes an overlay over images, but the overlay extends beyond the image itself and covers the padding area as well. If I switch the padding to margin in order to eliminate this unnecessary overlap, it causes the last image to be pushed onto a new row.

.sb-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0a0a0a;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.sb-overlay:hover{
    opacity: 0.5;
}
.sb-text{
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
}
.s-image img{
width: 100%
}
.grid-item{
padding:5px !important;
}
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<div class="row">
    <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
        [Insert remaining grid items here]
        
</div>

I'm looking for a solution to remove the overlay from the padding area and make it the exact size of the image. Any advice on how to achieve this?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Given that absolute positioned elements align themselves based on the closest parent with a set position, you should apply position: relative and display: block to your a.s-image element. At present, your overlay is positioning itself relative to the .grid-item.

.sb-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0a0a0a;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.sb-overlay:hover {
  opacity: 0.5;
}

.sb-text {
  color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
}

.s-image {
  display: block;
  position: relative;
}

.s-image img {
  width: 100%
}

.grid-item {
  padding: 5px;
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<div class="row">
  <div class="grid-item col-sm-6 col-md-4">
    <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
      <img title="This is the title" src="https://picsum.photos/600/300" />
      <div class="sb-overlay">
        <div class="sb-text">
          This is the title
        </div>
      </div>
    </a>
  </div>

  ...
  
  <div class="grid-item col-sm-6 col-md-4">
    <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
      <img title="This is the title" src="https://picsum.photos/600/300" />
      <div class="sb-overlay">
        <div class="sb-text">
          This is the title
        </div>
      </div>
    </a>
  </div>
</div>

USING CALC()

Because absolute positioned elements inside another element take into account any padding as part of the element's dimensions, utilizing calc allows you to manage width and adjust top,left,right,bottom values accordingly.

Incorporating Bootstrap introduces an automatic 15px padding to the column's sides.

.sb-overlay{
    position: absolute;
    width: calc(100%-30px);
    height: calc(100%-10px);
    top: 5px;
    left: 15px;
    right: 15px;
    bottom: 5px;
    background-color: #0a0a0a;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.sb-overlay:hover{
    opacity: 0.5;
}
.sb-text{
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
}
.s-image img{
width: 100%
}
.grid-item{
padding:5px;
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<div class="row">
    <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
    
   ...
   
    <div class="grid-item col-sm-6 col-md-4">
        <a data-content="Here is a caption" class="magnific-popup s-image" href="https://picsum.photos/600/300">
          <img title="This is the title" src="https://picsum.photos/600/300" />
          <div class="sb-overlay">
              <div class="sb-text">
                    This is the title
              </div>
           </div>
        </a>
    </div>
</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

Problem with Jquery date picker when text field is focused

I am currently working on a website: When I try to schedule a visit by clicking the link (located in the lower left side of the white area in the center of the page), a form is supposed to open in a modal window. However, when I click on the text box ask ...

jquerybootstrap-4

What is the best way to adjust the size of the circles in my d3 leaflet implementation based on the frequency of longitude/latitude pairs?

I'm currently diving into the world of d3 and attempting to create a map using leaflet. Within my dataset, I have thousands of latitude and longitude coordinates. While I've successfully plotted circles on a leaflet map in d3, I'm now faced ...

htmld3.jsleaflet

Guide to creating a square-shaped Bootstrap popup box

Is it possible to change the shape of the bootstrap popup box from rectangular to square? I need it to be a square box. Any help would be greatly appreciated. Thank you in advance. For reference, here is an example: https://i.sstatic.net/APZNt.png < ...

htmlcssbootstrap-4

unwelcome tab spacing in CSS

I am facing an issue with unwanted spacing in my lists. I have a code that generates three-column lists, each containing about eight rows. However, the first list item of the last row is causing an unwanted space. It seems to shift entirely to the next col ...

htmlcss

Creating a Full Screen Image with HTML and CSS

On my current web project, I am aiming for an immediate impact with a full-screen image that transitions to reveal text and information when the user starts scrolling. The challenge lies in ensuring this effect is consistent across various screen resolutio ...

csshtmlgoogle-chromeweb

The CSS design morphs as I adjust the browser size. Despite my limited coding experience of just a few weeks, I've encountered a challenging obstacle

Hi there, I've been searching on W3 and various other sources but haven't found a solution to my problem. I have managed to create the layout I want, however, it starts falling apart when I resize the browser window. I'm relatively new to co ...

htmlcss

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Hey everyone, I am facing an issue with declaring id and class when creating a table dynamically. I have tried multiple functions to make my click event work but without success. Can anyone help me with this? Below is the code for my dynamic table where I ...

javascriptjquerycssdynamicclick

Generating a hyperlink to a specific user ID within a data table

I'm facing an issue with the formatting of my simple table when trying to navigate to user.id. Is there a better approach to this or should I consider moving LinkToUser? All styling has been removed to avoid any conflicts. import styled from 'st ...

javascripthtmlcssreactjsstyled-components

What is the protocol for displaying linear gradients that overlap?

My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward: body { background: #eac996; } .box { width: 100px; height: 100px; margin: 100px auto; padding: 20px; backgroun ...

csslinear-gradients

The switch case functionality refuses to change when I interact with the user interface

Can someone please help me troubleshoot? I'm not receiving any errors in the Chrome console. HTML <div class="wrapper"> <i id="repeat" class="fas fa-stop-circle"></i> </div> Javascript const wrap ...

javascripthtml

Tips for saving an array of objects in local storage and transferring it from one file to another

Recently delving into the world of localstorage, I've encountered an issue while attempting to store JSON data in one file and retrieve it in another. The JSON data below was fetched from a URL, and my goal is to obtain all the feed objects in the oth ...

javascriptjqueryjsonhtml

Can anyone suggest a way to change the orientation of mapped items from column to row?

In my React app, I am creating a keyboard using the following component: Keypad.js const Keypad = () => { const letters = [ 'Q', 'W', 'E', 'R', 'T', ...

htmlcssreactjs

How can you convert an epoch datetime value from a textbox into a human-readable 24-hour date format

I have an initial textbox that displays an epoch datetime stamp. Since this format is not easily readable by humans, I made it hidden and readonly. Now, I want to take the epoch value from the first textbox and convert it into a 24-hour human-readable da ...

javascripthtmldatetimemomentjsepoch

Ordering tables in jQuery with both ascending and descending options

Trying to sort a table in ascending and descending order using jQuery? Here's the JavaScript code for it. However, encountering an error: Cannot read property 'localeCompare' of undefined If you can provide guidance on how to fix this so ...

javascriptjqueryhtmlcss

Creating Static Content using Spring Framework

I need some help with handling static content in my SpringMVC app. Currently, I am using the following configuration: <mvc:resources mapping="/resources/**" location="/resources/" /> This setup works well for uploading and retrieving images within ...

cssspringmodel-view-controller

Python Selenium Timeout Exception Handling

Looking for a solution: def get_info(url): options = webdriver.ChromeOptions() options.headless = True chrome_browser = webdriver.Chrome('./chromedriver', chrome_options=options) chrome_browser.get(url) name = chrome_browser.f ...

pythonhtmlseleniumweb-scraping

Compass - substitute a single value for an alternate attribute

Can I utilize a value from one class to customize another? Consider the following class: .sourceClass { color: red; } And now, let's say we have this class: .destinationClass { border-color: ###needs to match the color in .sourceClass => re ...

csssasscompass

Retrieve data from json files

After retrieving this object from my controller, I have a name, a list of beans, and a list of operations: { "name": "Charge", "beans": [ ], "operations": [ { "name": "getSize", "returnType": "java.lang.Integer", "descriptio ...

javascripthtmlangularjs

Tips on personalizing the DateTimePicker component from Material-UI

I am currently working on customizing the DateTimePicker component provided by Material-UI. To access its documentation, please visit: One challenge I have encountered is the lack of styling information in the documentation. My goal is to change the main ...

cssreactjsmaterial-uidatetimepicker

Troubleshooting: jQuery addClass() function not functioning properly in conjunction with attr("href", something)

I am trying to implement a unique feature for a link using a Bootstrap button, where it only works on the second click. On the first click, the appearance of the link should change slightly. To achieve this, I am utilizing the .addClass(newClass), .removeC ...

javascriptjqueryhtmltwitter-bootstrap