Updating the content of a div element to display as a solid color instead of

I am working on creating an interesting hover effect where the background changes dynamically. I want to have a div with an image as the background, overlay (another div) with 50% opacity in any color, and then upon hovering, make the background white. I tried adjusting the opacity of the overlay but it didn't produce the desired effect.

I have searched everywhere for a solution but couldn't find anything that worked. Can someone please provide me with some guidance or insights into how to achieve this effect?

The gif below illustrates the effect I am aiming for. Thank you in advance for your assistance!

https://i.sstatic.net/BVuD9.gif

UPDATE: I have included the code snippet below.

.qm-container {
  display: flex;
  flex-direction: column;
  width: 33%;
  min-height: 35%;
  position: relative;
  margin: 0 50px;
}

.qm-container img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.qm-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(5, 69, 151);
  z-index: 1;
  opacity: 0.65;
}

.qm-container h6 {
  z-index: 2;
  color: white;
}

.qm-container p {
  z-index: 2;
  color: white;
}

.qm-container:hover {
  color: white;
  transition: all .6s;
}
<div class="qm-container">
                        <img src="/img/Qmupdated.png" alt="">
                        <div class="qm-overlay"></div>
                        <div class="quality-management">    
                            <h6>1. Quality Management Systems according to ISO 9000 2015</h6>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                                sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                                porro
                                quo perferendis accusamus!</p>
                        </div> 
                    </div>

Here's the issue I am currently facing:

https://i.sstatic.net/AC8bi.gif

I am struggling to hide the image upon hovering over the content.

htmlcss

Answer №1

If you're looking for a template on how to achieve this, here is an example with the option to include transition effects.

.container {
width: 300px;
height: 300px;
background-image: url(https://via.placeholder.com/300);
position: relative;
}

text-overlay {
color: black;
position: absolute;
width: 100%;
height: 100%;
right: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}

.container:hover text-overlay {
background-color: white;
}
<div class="container">
<div class="text-overlay">YOUR TEXT HERE</div>
</div>

Answer №2

Include a :hover effect in your code that changes the background color.

.qm-container:hover {
  background: white;
  transition: 0.5s;
}

I believe this is what you were looking for.

Link to see the code in action

.post-card {
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  width: 30vw;
  height: 30vh;
  transition: 0.5s;
}

.post-text {
  color: white;
  font-size: 2rem;
}

.post-card:hover {
  background: blue;
  transition: 0.5s;
}
<div class="post-card">
  <div class="post-text">Example</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

Tips on how to create a line break in CSS after reaching a specific width

I am currently working on the design of a chat user interface. One issue I have encountered is that when I input a large number of characters into my chat bubble, they end up spilling outside of the bubble. Does anyone know of any CSS techniques that can ...

htmlcss

Managing Multiple Checkboxes in PHP Forms

I have a system in place that retrieves questions from a database and dynamically creates survey pages. The user's responses are then submitted to the same form via POST method. The code is designed to categorize each question as either Checkbox or Ra ...

phphtmlcheckbox

Tips for importing HTML modules using AJAX technology?

Is it possible to load the correct module on my site depending on the path that the user enters? Would storing the HTML in a file named some_file.htm, ajaxing that file to the client, and then appending it to the DOM work for this purpose? I'm curio ...

javascripthtmlcss

The page background appears to be incomplete in its coloring

As I work on creating a web application for personal use, my goal is to ensure it is mobile-friendly. However, I've encountered an issue where the background of my language page isn't displaying in full blue color as intended. Despite trying diff ...

htmlcssreactjs

Navigate to an external webpage upon clicking using VUE.JS

<h3 :class="{'active': game.Desktop}" @click="game.gameAchievements = false, game.gameCreation = false, enJin.audioController.play('take')" @mouseenter="enJin.audioController.play('cardHo ...

htmlvue.jshttp-redirect

"Header becomes frozen in place while scrolling, never budging from

I am looking to implement a sticky header effect on scroll, similar to the example shown here: () Check out the source site for more details: (https://github.com/davist11/jQuery-Stickem) Currently, I have a full-screen video playing at the top of the page ...

javascriptjqueryhtmlcss

Access a SQL database to retrieve a data value and seamlessly integrate it into an HTML document with the help of node

I am new to web development and currently facing a challenge in displaying SQL content on an HTML page. My stack includes Node.js, Express, and SQLite3. I have a folder named public containing HTML, CSS, and JS files. The objective is to retrieve a varia ...

javascripthtmlnode.jsexpress

Organize the attributes of components on the following line in Visual Studio Code

Is there a method to configure the VS code formatter for Angular 2+ templates to ensure that attributes are wrapped in a new line? I prefer this formatting: <app [input1]="input1$ | async" [input2]="input2$ | async" (inputChanged)="set ...

htmlangularvisual-studio-code

Tips for synchronizing JavaScript rendering time with Python requests?

My goal is to retrieve the HTML content of a JavaScript-generated website so that I can extract information using BeautifulSoup. However, when I attempt to request the HTML, the data I receive is from before the page fully loads. Below is the code snippet ...

pythonhtmlbeautifulsouprequest

Applying a color gradient to a specific spot on the page, regardless of how far down users scroll

I have implemented a CSS code to add a shadow effect to the top part of my webpage, similar to what Facebook does on user profile pages. While this works well for shorter pages, I am encountering issues with longer pages where the shadow extends too much a ...

css

AngularJS is still not fully trusting the HTML content within a custom directive, even after using $sce.trustAs

I have been delving into the world of AngularJS and experimenting with crafting a unique custom directive for a tabbed notebook feature complete with pages. You can view my creation on JSFiddle by following this link. http://jsfiddle.net/kdtop/rxuchg1t/ ...

javascripthtmlangularjs

Change the pseudo class "typed::after" to eliminate the element

Hey there, I need some assistance on how to target a specific element with the class .typed::after using JavaScript. The code provided below only targets classes without ::after or ::before, and the cursor is currently positioned on the after of 'type ...

javascriptjqueryhtmlcss

Preventing a webpage's CSS from affecting an iframe loading an HTML document

Whenever I load an iframe, it seems to change a bit. Do I need to apply some kind of reset or adjustment? How can I ensure that the content within the iframe looks consistent no matter what page it's loaded into? ...

javascripthtmlcssiframe

Overlap with upper picture formatting

I've been struggling to create an ion-card with two images: a main picture and a small book cover. Any ideas on how to achieve this? Note: The layout should have 2 images, one at the top and another as a small book cover. Check out this sample on St ...

cssangulartypescriptsassionic3

Unable to create a webpage that allows for the importing of data from Excel VBA

Seeking assistance with the following query... I am using excel vba to input a serial number into a webpage and then clicking on a 'Check Warranty' button on the page. The expected outcome is for more data to be displayed, but instead, when click ...

excelvbainputhtml

How to style the first dropdown value in AngularJS to appear bold?

Is there a way to style only the first value in a dropdown list as bold without using jQuery? Here is the code for the dropdown: <div class="col-xs-3"> <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" i ...

javascriptjqueryhtmlcssangularjs

Tips for creating an endless loop within a nested v-for in Vue?

Here is my attempt at solving the problem: HTML <ul class="tree"> <li> <span>First Node</span> <ul> <li v-for="(tree, i) in trees" :key="i"> <span v-text="tree. ...

javascripthtmlvue.js

Following the completion of the inspection, the next step

Check out my work at this link: Unfortunately, my code is too lengthy to include here, so please refer to the link above to see the issue I am facing. The problem I am encountering is that when I click the checkbox after adding an item to the list, the r ...

javascripthtmlcss

A guide on incorporating the CSS 'content' property with the 'option' tag

Is it possible to include CSS 'content' in the 'option' tag? For example, I want to display "Name: Volvo". <html> <head> <style> option:before { content: "Name: "; } </style> </head> <body> ...

htmlcss

Navbar links in Bootstrap unexpectedly expanding in width

My website has a navigation menu that looks like this: https://i.stack.imgur.com/1R8mv.png However, when I click on a menu item, the link container inherits the width of the dropdown menu. Is there a way to prevent this using purely CSS? I am currently ...

htmlcsstwitter-bootstrapdrop-down-menudropdown