Image overlay on a hovering background

I'm currently facing a challenge with creating a hover effect for a background image while keeping the image in front unchanged.

I would like the background to darken on hover, but I want the image in front of it to remain the same. Essentially, I need the background to change on hover while the overlaying image stays unaffected.

Here's the HTML structure:

<div class="mydiv">
  <img class="img" src="Assets/Sources/badge1.png" width="60%" height="60%" >
</div>
<div class="overlay"></div>

CSS styles:

.mydiv {
  float: left;
  width: 49%;
  height: 400px;
  margin-right: 1%;
  background-image: url(Sources/bg1.jpg);
  background-color: black;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mydiv:hover .overlay {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
  opacity: 0.5;
}

Answer №1

To easily achieve this effect, you can utilize a pseudo element on the .mydiv class without utilizing the .overlay element at all:

.mydiv > img {
    position: relative;
}
.mydiv:hover::before {
    content: "";
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity:0.5;
}

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

Guide on converting AS3 to HTML5 while incorporating external AS filesAlternatively: Steps for transforming AS

I've been given the challenging task of transforming a large and complex Flash project into html5 and javaScript. The main stumbling block I'm facing is its heavy reliance on external .as files, leaving me uncertain about the best approach. Most ...

Video background with alternate image for touchscreen devices

Check out this website! The background video is functional on desktops. On smaller screens, an image is shown instead using CSS display property. However, what should be done for touch screens like iPads, which are not exactly small? Here's the code ...

Shifting annotations on a Bar Graph featuring Negative Values on Google's Chart Maker

Incorporating google charts into my MVC project. Looking to create a bar chart that accommodates negative values. Desire annotations on the same side as the end of the bar for negative values (similar to positive values shown in the green box below). ht ...

Tips for calculating the total of each row and column in a table with jQuery

<table id="repair-invoice"> <tr> <th>Item</th> <th>Parts</th> <th>Labor</th> <th>Total</th> </tr> <tr> <td>Oil Change</td&g ...

The child's styling is conflicting with the parent's styling

Issue with Parent and Child Component Margins import "../src/App.css"; import CardComponent from "./components/CardComponent"; function App() { return ( <div className="App"> <div className="card"></div> <CardCompon ...

Customizing div elements in various RMarkdown documents with a CSS file

I want to apply styling to divs in various RMarkdown files using a CSS file. However, I am encountering syntax issues when trying to use the external CSS file to style the div. Embedding the style tag within the rmarkdown body works as shown below: --- ti ...

Displaying an HTML string on a webpage

I am developing a user dashboard using Django for a Python-based web application. This web application generates emails, and the HTML content of these emails is stored in a file (and potentially in a database table as well). As part of the dashboard's ...

Creating a dynamic web application using Node.js, HTML, and MySQL arrays

After querying my database from MySQL Workbench, I need to convert the retrieved data into HTML code. connection.query( 'SELECT dealer_infor.dealer_id, dealer_infor.dealer_branch, dealer_infor.dealer_address, dealer_infor.dealer_tel, dealer_infor. ...

What could be the reason for the discrepancy between my get_token() function and the value obtained from request.META.get("CSRF_COOKIE")?

Can anyone shed light on why I'm facing this particular issue? I am currently exploring the integration of Angular 17 as a Frontend with Django as a Backend. While validating a form, I encountered an issue where the token obtained from Django does no ...

transformation of images

Currently, I am using dynamic code to retrieve my gallery images: <section id="banner"> {pyro:galleries:images slug="template-slider" limit="5"} <img src="{pyro:url:base}uploads/default/files/{name}" alt="{name}"> ...

Surprising results when a class is applied using jQuery

Exploring the differences between two fiddles (make sure to run the code on the jsfiddle pages to see the differences clearly). First Fiddle Simple demonstration: $("body").addClass("noScroll"); alert($("body").hasClass("noScroll")); $("body").removeCla ...

Placing pins on Google Maps

I'm attempting to display two separate markers on two individual maps positioned next to each other on my website. <script type="text/javascript"> var map, map2; function initialize(condition) { // setting up the maps var myOptions = { zoo ...

Tips for maintaining the original ng-click initialized value as the ng-init value after the page is refreshed

My ng-repeat feature includes buttons for liking and disliking images. The problem I'm facing is that each time the page refreshes, the count of likes and dislikes gets reset to the initial value set by ng-init. How can I maintain the incremented lik ...

Adjust tool tip text on the fly

As a beginner, I created a test table and now I want to make the tool tip text change dynamically when I hover over the table with my mouse. Ideally, I would like the tool tip text to correspond to the content of the table cell. Currently, I only have stat ...

Is your data coming in as NaN?

I am currently developing a basic webpage that has the capability to calculate your stake and determine your return, reminiscent of a traditional betting shop. As of now, I have successfully hard coded the odds into my page. However, while testing my code ...

How can I use an ajax get request to retrieve a css file from a webpage and then customize the default styles in my program?

Here is my current code snippet: HTML: <h1>Test Message</h1> Default CSS: h1{ font-size: 24px; } Jquery: $(document).ready(function(req, res){ $.ajax({ url:"example.com/test.css", type : "GET", crossDomain ...

What is the best way to achieve this particular grid layout using html and css?

I have a CSS grid of icons and I am trying to create a divider between each cell that fades in opacity towards the edges, similar to an airbrush effect. However, I want the cells themselves to remain transparent so that the background pattern is still visi ...

Issues encountered with java applet functionality when incorporated into an HTML document

I'm facing a simple issue with my "Hello World" applet not converting into HTML as expected. Even though I have provided the necessary code and base to upload the file, the HTML is showing an error that resembles commands from an operating system ter ...

Utilizing special symbols using the Net::Twitter::Lite library

When I attempt to send characters like ü, ä, ß, à, and others to Twitter, they appear incorrectly. Using unicode characters in my scripts results in the characters displaying wrong on Twitter. Even when utilizing HTML (which has previously worked in Tw ...

What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

I am facing an issue with a set of three inline divs that need to be displayed either in a row or in a column if they do not fit within their container width. In cases where the container is too narrow for them to fit in one row, but not narrow enough to c ...