Create a custom overlay for an image that is centered horizontally and does not have a fixed width

I'm working with this HTML setup:

<div class="container">
    <img class="image" />
    <div class="overlay">
       <div class="insides">more content here</div>
    </div>
</div>

and trying to style it using this CSS code:

.container {
  position: relative;
  height: 88vh;
  margin: 0;
}

.image {
  height: 100%;
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  top: 0;  
  bottom: 0;
  right: 0; 
}

.overlay {
  position: absolute;
}

These are the specific requirements I need to meet:

  1. Ensure that the image fills the available vertical space and is centered horizontally. (So far, so good)
  2. Create an overlay of the same size as the image without specifying an exact width. (Currently running into issues with this)
  3. Position icons in precise locations on the image. (I'm considering using percentages for the top and left properties, but it may be more complicated than anticipated.)

Is there a way to achieve all of these specifications - having a horizontally centered image that expands to fill the vertical space, an accurate overlay, and fixed elements on specific parts of the image?

Although I would prefer a CSS workaround, I'm open to also exploring a Javascript solution if it's necessary to dynamically calculate the image width for the overlay.

javascripthtmlcssimageoverlay

Answer №1

Here is a method to achieve this: You can enclose the Image and the Overlay in a div and center it.

.container {
    position: relative;
    height: 88vh;
    margin: 0;
    text-align: center;
}
.imagecontainer
{
    position: relative;
    display: inline-block;
    height: 100%;
}
.image {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
<div class="container">
    <div class='imagecontainer'>
        <img class="image" src='imageurlhere'/>
        <div class="overlay">
           <div class="insides">more elements here</div>
        </div>
    </div>
</div>

This way, the Image will determine the width of its parent element, which in turn sets the width of the Overlay as well.

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

Tips for generating numerous sub div tags using jQuery

Is there a way to achieve this output with jQuery? I have working code here: . (See image for reference: https://i.stack.imgur.com/eOXiN.png) When trying to replicate the same using jQuery, I encountered an issue where there is no spacing between two imag ...

jqueryhtmlcss

Is it possible to utilize mathematical operators such as multiplication, division, addition, subtraction, and exponentiation to transform a non-zero numerical value into

I am currently working with Oracle Siebel software which supports JavaScript expressions using only specific operators such as multiply, divide, subtract, add, and XOR (*, /, -, +, ^). Unfortunately, other operators like ! or ? : are not available for use. ...

javascriptsiebel

Explore the diverse webpages on my website

My website is built in html+css and the main content is contained within a div with the id "content" on index.html. There's a link on the menubar that leads to page2.php, but I want the content of page2.php to be displayed inside the <div "content" ...

phphtmlweb

Looking to enhance your navigation menu with drop shadows?

I am trying to add a drop shadow effect to the navigation menu on my WordPress website. You can view the desired effect here. However, I have attempted to apply it to my .navigation-main class without success. Below is the header code: <header id="mast ...

wordpresscssnavigationdropshadow

What steps should I take to modify the URL using the SELECT tag?

Having a bunch of SELECT tags in place <select id="url"> <option id="url1" >url 1</option> <option id="url2" >url 2</option> </select> <button onclick="go()">GO</button> Followed by the associated scrip ...

javascriptjqueryhtmlajax

Using a render target causes certain elements of my visual graphics to become hidden

Hey there, I've been experimenting with render targets lately and encountered some issues. I've put together a simplified example below: init = function() { // RENDERER canvas = document.getElementById("mycanvas"); renderer = new THREE ...

javascriptthree.js

Styling CSS Based on Input from Child Siblings

Is it possible to customize an adjacent element based on a valid input from a child element? Let's say we have the following HTML structure: <div id="source"> <input type="text"> </div> <div id="target"> </div> Below ...

htmlcsssassless

The margin-right and margin-left properties function differently when it comes to dealing with overflow of floated divs

<body> <div class="content"> <div class="content-sidebar"> content-sidebar </div> <div class="content-main"> content-main </div> ...

csscss-floatoverflow

Ways to showcase the chosen choices from earlier stages in the intelligent guide

Currently, I am developing a user interface for my latest project and have incorporated the Smart Wizard from . In particular, I am utilizing the smartwizard-modal.html found in the examples section of smartwizard. This specific smart wizard modal consis ...

htmlbootstrap-4smart-wizard

What adjustments can I make to my smooth-scrolling JavaScript code in order to exclude my Bootstrap Carousel from the scrolling

On my website, I have incorporated JavaScript to create a smooth-scrolling effect when a user clicks on a hyperlink. This feature is essential as the landing page includes a chevron-down icon that prompts the user to navigate to the next section of the pag ...

javascripthtmltwitter-bootstrapbootstrap-4

A guide on Extracting Values from Nested Objects

Although I am not well-versed in JavaScript, I have a small project where I need to use JavaScript. I am attempting to retrieve values from an object nested within another object. However, my code is throwing errors. Below is the snippet of my code with d ...

javascripthtml

Unable to retrieve HTTP call response during debugging, although it is visible in the browser

When I send an HTTP request to create a record, I am able to see the added record id in the Network section of browsers like Chrome and Firefox. However, when I try to debug the code and retrieve the same id value, I encounter difficulties. I have tried us ...

javascriptangulartypescripthttprxjs

Determining the scrollWidth of a div with an absolutely positioned child div

Having some trouble determining the width of a div's content instead of the div itself. The typical solution would involve using Javascript's scrollWidth property. However, there is a complication in this case. Inside the div, another div is ab ...

javascriptjquery

onsubmit function was never triggered

Seems like a silly mistake, but I'm encountering an issue with my HTML form. Here's a snippet of the code: <form onsubmit="updateProfile();"> <input type="submit" value="Update Account"> .. ... </form> However, w ...

javascriptjqueryhtmlonsubmit

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...

cssmobile

Is there more to AJAX than just fetching a JSON file?

I am in need of using AJAX to achieve my goal. My aim is to have the content of specific subpages displayed in the HTML markup below when a particular link in a list is clicked. This data can be readily accessed from the database via the CMS's API (I ...

javascriptphpjsonajaxprocesswire

JavaScript: CryptoJS does not have the SHA1 method implemented

This seems like a simple issue to resolve.... Although my CryptoJS object is present, it appears to be lacking a SHA1 method. What steps should I take to rectify this? Despite various examples available, my specific case remains unresolved... On a posit ...

javascriptsha1cryptojs

What could be preventing this AJAX call from running correctly?

I am in the process of developing a website that provides users with a discount based on a promotional code they can input. It is important for me to verify the validity of the code in our database before allowing a new sign-up to proceed. Below is the AJA ...

javascriptphpajaxpost

Ways to alter the div post user authentication

I'm in the process of developing a website with a single-page application setup. I'm utilizing Node.js for the backend and Angular for the frontend. The challenge I'm facing is displaying a specific div when a user is not logged in, and swit ...

javascriptangularjssingle-page-applicationangular-ng-if

How does JavaScript function syntax differ in Next.js and JSX?

I'm in the process of creating a function that allows users to select different sizes. It currently works fine with just JavaScript and HTML, but I'm encountering an error when using it in Next.js. Can someone confirm if my syntax for the JavaScr ...

javascriptreactjsnext.jsjsx