Creating transparent overlay boxes with CSS grid

I'm working on a design where I need to display text information over an image. The challenge is aligning the text properly, especially when the screen size changes due to using a grid system (1140). Currently, I have a div with transparent background and formatted content placed below the image. By using margin-top: -50% in CSS, I can position the text over the image, but it doesn't always line up correctly as the screen size shifts.

This is what my code looks like so far:

HTML (in Slim)

.fourcol
  .book
    img src="#{book.image_url}"
    .book-info
      header
        h4.title
          = book.title
        h6.author
          = book.author
      p.description
        = book.description

Relevant CSS:

.book-info {
      margin-top: -62%;
      padding: 1em;
      padding-bottom: 1.5em;
      float: left;
      background-color: black;
      opacity: .8; }

My question is, how can I make sure that the bottom of `book-info` always aligns with the bottom of the image?

cssoverlaytransparent

Answer №1

To properly position the element .book-info in relation to .book, you can utilize the CSS property position: absolute:

.book {
    position: relative;
    overflow: hidden; /* Helps clear any floating elements inside */
}

.book-info {
    position: absolute;
    bottom: 0; /* Aligns the element to the bottom of its container */
}

Take a look at this example.

Answer №2

To properly display the image and related information, it is necessary to enclose the div containing the details within a wrapper along with the image.

<style type="text/css">
    #info 
    {
        position: relative;
        bottom: 0px;
        width: 100%;
        height: 4%;
        opacity: 0.5;
    }
    #theImage
    {
        width: 100%;
        height: 100%;
    }
    #wrapper
    {
         width: 15%;
         height: 15%;
         overflow: hidden;
    }
</style>

<div id="wrapper">
    <img id="theImage" src="..." alt="" />
    <div id="info">Detailed information relating to the image</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

JavaScript-generated div not recognizing CSS in Internet Explorer

Once again, dealing with Internet Explorer has become a major headache. On headset.no, we have incorporated a small blue search field. However, when you input "jabra" into the field, it should generate suggestions in a div underneath. This feature operates ...

javascripthtmlcssinternet-explorer

Using SVG files as properties in React from a data.js file

I have a website where I store my content in a data.js file and pass it to my components using props. Everything is working correctly, except for my .svg files. When I try to display them, they do not appear. However, if I change the extension of the image ...

javascriptcssreactjswebpack

The Beginner's Guide to Mastering Ajax and Grails

As a newcomer to Grails and AJAX, I find myself struggling to understand the concept of AJAX with limited resources online. My current understanding is that in Grails, if I want to trigger a method in one of my controllers when a specific part of my HTML ...

htmlcssajaxgrailsweb-applications

The text exceeds the maximum width of the table column

Currently, I am working with a table and utilizing the <col> tag to define column widths. However, I have encountered an issue where one of the columns, set at 5% width, contains a title that is 16 characters long, wider than the allocated 5%. As a ...

htmlcsswidthcss-tables

Progressive zoom effect applied to an image in a JavaScript slideshow

Can someone assist me in replicating the zooming effect demonstrated in this code snippet: `http://codepen.io/docode/pen/EjyVQY`. I am specifically focusing on the zooming feature of this slideshow. How can I replicate this zooming effect in JS rather t ...

javascriptjqueryhtmlcsszooming

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

I'm currently working on a project that requires adding a decoration in front of some anchor links (A). Right now, I am using ::before to achieve this. However, there is an issue where some of the links will line-break and the second line and subseque ...

css

The navbar links in Bootstrap 4 may be hidden, but the navbar brand still remains visible

I have implemented this code for my website's navbar, however, upon running it, I noticed that the navigation links are not visible. The navbar brand name "test" appears correctly, but the other links seem to be hidden. Does anyone have any insights o ...

htmlcssbootstrap-4navbar

Numerous slideshows using identical scripts

I am facing an issue with my code for multiple slideshows. Currently, it works fine for a single slideshow but when I have multiple slideshows and mouse over any of them, all the slideshows start running due to sharing the same class. However, if I try to ...

javascriptjquerycss

How can you enhance the visibility of AngularJS Materials dropdown menus?

While experimenting with AngularJS Materials, I noticed that the text in some elements like <md-input-container> and <md-select> may be too light for some people to read easily. I wanted to find a way to make the text more visible without chang ...

javascripthtmlcssangularjs

Having difficulty displaying this code accurately on Google Chrome

I managed to create a hover effect over a series of images that displays additional information when hovered over. Below is the code I used: HTML <ul class="photo-grid"> <li> <a href="https://www.abglobal.com/" target="_blank"& ...

htmlcssgoogle-chromemousehover

Exploring the Fusion of Different Styles in Material-UI Using React

I have two different styles that I use in my code. One style is specific to certain components, while the other style is global and used across various components. For example, consider the following file tree: index.tsx -App.tsx -globalConstants.ts In ...

javascriptcssreactjsstylesmaterial-ui

When resizing the browser or changing resolution, one div may cover another div

After generating the HTML on my ASP.NET page, everything looks good initially. However, I noticed that when I adjust the screen resolution or reduce the browser size, the image in the logoplace div starts to overlap. It appears to be an issue with absolute ...

csshtml

How can I prevent a span in CSS from stretching its parent element?

Utilizing the twitter bootstrap thumbnails successfully, we have implemented a description feature inspired by the bootstrap documentation. The distinction lies in our decision not to specify a size (e.g., .span4) for our thumbnails; instead, the content d ...

htmlcsstwitter-bootstrapwidth

I am looking to initiate the animation by triggering the keyframe upon clicking a button

Is there a way to create an animation triggered by a button click instead of loading the page? Each table data cell has its own class with a unique keyframe defining the style changes over time. @-webkit-keyframes fadeIn { from { opacity:0; ...

javascripthtmlcss

CSS code causing issues with table cellpadding functionality

I am currently working on a webpage that is utilizing a pre-existing stylesheet. This particular stylesheet includes the following style rules: table { border-collapse: collapse; } th, td { padding: 0; } My challenge arises when I attempt to cre ...

htmlcss

Styling CSS: Create circular images with dynamic text positioning or resizing on screens larger than 768px

I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...

cssresponsive-designbootstrap-4

"Enhance the visual appeal of your Vue.js application by incorporating a stylish background image

Currently, I am utilizing Vue.js in a component where I need to set a background-image and wrap all content within it. My progress so far is outlined below: <script> export default { name: "AppHero", data(){ return{ image: { bac ...

javascripthtmlcssvue.js

Animating colors with jQuery and shifting SVG shapes to create dynamic and

I am currently working on an svg animation that involves changing the color of the svg to a different color, creating a running light effect. Rather than fading the fill color of the entire svg as commonly seen in examples, I aim to achieve a dynamic trans ...

javascriptjquerycssanimationsvg

Alter the appearance of another div when focused on

Is there a way to change the fill color of the SVG when a user focuses on the input field? I have included the HTML and SCSS for reference, but I'm not sure how to write the CSS code to achieve this effect. <div class="search"> <svg widt ...

htmlcsssvgsassfocus

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...

javascriptjquerycsshtmljquery-ui