overlay the div or image with a translucent color

I have a div containing an image with the results from my database, carefully designed and positioned within each div. However, I would like to highlight certain results by overlaying them with a color.
I am seeking a method to achieve this effect without adding another div on top of the existing one.
Unfortunately, using background styling will not work due to the image having a higher z-index than the div itself.

My goal is to implement this feature simply with CSS, as I will be retrieving the necessary properties from a database query and applying relevant classes to the result rows.
Any creative ideas would be greatly appreciated! :)

Thank you in advance.

css

Answer №1

section {
    position: relative;
}
section:before {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    right: 10px;
    bottom: 30px;
    left: 15px;
    background: rgba(0, 255, 0, .7);
}

Feel free to adjust the top, right, bottom, and left values to modify the overlay distance from the element edges.

Answer №2

Given the limitations, here is a simple solution:

div{background:#f00}
img{opacity:.5}

It may not be the most elegant, but it should do the job.

Answer №3

Appreciate everyone's input,
I'm currently searching the database for the property, and if it exists, I am adding a new div as a child to the result Div. Below is the CSS code associated with this action: 

div.cheapest {
 background: red;
 z-index:85;
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 opacity:.3;
}

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

Issues with Bootstrap-slider.js functionality

I'm having trouble getting the bootstrap-slider.js library from to function correctly. All I see are textboxes instead of the slider components. You can view an example at I have verified that the CSS and JS files are pointing to the correct direc ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is the background image on my class website too large?

I am having an issue with the redbar.png image in my CSS. It is positioned too high (within #container) and overlapping with the horizontal nav bar when it shouldn't be. I'm uncertain how to fix this problem. Any suggestions would be greatly appr ...

htmlcssimage

Tips for arranging HTML image sources to prepare for future updates

Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a n ...

htmlcss

Adjust the class of the iframe element when clicked

I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have: Here is a snippet from my index.htm ...

javascriptjquerycsshtmliframe

Tips for creating a website with an integrated, easy-to-use editing tool

Recently, I designed a website for a friend who isn't well-versed in HTML/CSS/JavaScript. He specifically requested that the site be custom made instead of using a web creator. Now, he needs to have the ability to make changes to the site without nee ...

javascripthtmlcsseditor

Alignment issue: Center alignment failing to work correctly

I'm currently working on a navigation bar with a central title and links to other pages aligned to the right. Despite using text-align: center, the title remains off-center. I've implemented a flexbox to ensure that the title and links are on the ...

htmlcss

The CSS transition feature does not seem to be functioning properly when it comes to displaying

In my Next.js application, I am using a card component with a "read more" link that should expand the card when clicked. To achieve this behavior, I integrated the "react-show-more" library from https://github.com/One-com/react-show-more. I tried to add ...

htmlcssreactjsnext.js

The attempt to execute 'removeChild' on 'Node' was unsuccessful because parameter 1 is not the correct type. Although it did remove the elements from the DOM, it only did so once

It's quite a challenge I'm facing!!! Although there have been similar questions asked before, they were all for specific scenarios. I am currently developing a tictactoe game using the module design pattern. The function below helps me create tw ...

javascriptcssreactjsdomfrontend

Is there a way to have a fixed width div positioned in the center of the screen, with two additional divs on either side

I have come across this stunning image: https://i.stack.imgur.com/tUYMc.png It serves as a header for a website - click on it to see the full size. I am trying to replicate this using HTML, CSS, and images, but I'm struggling. It needs to be 100% w ...

htmlcss

Angular Floating Panels: A Guide to Creating Dynamic User Interfaces

In the process of developing an angular app, I require a dock-able panel. After researching available controls online, I found them difficult to use and they compromised our screen layout. As a result, I am considering building a custom dock panel from s ...

htmlcssangulardockpanel

Tips for adjusting the size of icons in Ionic Framework v4 and Angular 7

The library ngx-skycons offers a variety of icons for use in projects. If you're interested, check out the demo here. I'm currently incorporating this icon library into an Ionic project that utilizes Angular. While the icons work perfectly, I&ap ...

cssangulartypescriptionic-frameworkicons

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

javascriptcssjsonextjs

Styling a div element in React

Just dipping my toes into the world of styling here, so bear with me. I'm currently working on a React app and attempting to bring an image from a file using the following code: import cup from './img/cup.png' My goal is to style it in co ...

cssreactjs

Struggling to get the font-weights of the Typography and Button components in the new React with Material-UI to display

In both my previous and most recent React applications, I have the following code snippets: <Typography variant="h6" color="inherit" noWrap > h6. Heading </Typography> <Button type="button" size="large" color="primary" > ...

cssreactjsmaterial-uicreate-react-app

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

How can I adjust the width of a handle/thumb for NoUiSlider?

Looking to adjust the width of a NoUiSlider using CSS: .noUi-horizontal .noUi-handle { width:8px; height:25px; left: 0px; top: -8px; border: 0px solid #000000; border-radius: 0px; background: #000; cursor: default; box- ...

javascriptcssnouislider

applying conditional rendering in vue.js

I'm currently working on developing a chat application using the guidelines outlined in this tutorial: https://socket.io/get-started/private-messaging-part-1/ One of my goals is to customize the appearance of the messages, so that when a message is s ...

cssvue.js

Tips on increasing the button size automatically as the elements inside the button grow in size

I have a button with an image and text inside, styled using CSS properties to achieve a specific look. However, I encountered an issue where the text overflows outside of the button when it's too long. I want to find a way to wrap the text inside the ...

htmlcss

Unable to align my navigation bar in the center

My navigation bar code is not centering on the website. Even after removing float: left, it doesn't move to the desired position. Can anyone help me with this issue? Thank you. css ul#list-nav { list-style: none; margin: 20px auto; paddi ...

htmlcss

Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over. I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm ...

jqueryhtmlcssanimation