Image overlay fading effect with text appearing once the image fades

After exploring various hover effects and techniques to display text on hover, I still haven't found the answer to my specific question.

My goal is to have an image with a transparent overlay that fades out on hover, revealing text in its place. It seems like a simple effect, but I can't quite figure it out.

I've created a JSFiddle to illustrate the effect I'm trying to achieve. It's a basic concept without transitions or images, just focusing on the desired outcome.

In summary, I'm wondering if there is a way to make a transparent overlay image fade out while simultaneously making text visible, using only CSS and no JavaScript?

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  height: 150px;
  width: 150px;
  z-index: 1;
}

.overlay:hover {
  position: absolute;
  opacity: 0;
  height: 150px;
  width: 150px;
}

.lay {
  color: #F0F;
  position: absolute;
  height: 150px;
  width: 150px;
  background-image: url('');
  background-color: #FFF;
  z-index: 0;
}

.lay:hover {
  opacity: 1;
}

Check out the JSFiddle DEMO here.

csshoveroverlay

Answer №1

Achieving this effect using only CSS is definitely doable, and the process is quite simple. Here's a breakdown of how it can be done:

  1. Start by creating a container element that will house an image and text.
  2. Place the text behind the image initially to keep it hidden from view.
  3. When the container is hovered over, use CSS to fade out the image and reveal the text in the background.

Below is a straightforward example:

.container {
  position: relative;
  display: inline-block;
}

.container:hover img {
  opacity: 0;
}

.container p {
  position: absolute;
  top: 45%;
  width: 80%;
  margin: 0 10%;
  text-align: center;
  z-index: 10;
}

img {
  position: relative;
  z-index: 100;
  transition: opacity linear 0.5s;
}
<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, Reveal Me!
  </p>
  <img src="http://placehold.it/250x250">
</div>

Answer №2

To achieve the fade effect, make sure to incorporate a transition on the overlay element.

https://jsfiddle.net/xznjfL0e/1/ 

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  height: 150px;
  width: 150px;
  z-index: 1;
  transition: 1s;/* <=== here */
}
.overlay:hover {
  position: absolute;
  opacity: 0;
  height: 150px;
  width: 150px;
}
.lay {
  color: #F0F;
  position: absolute;
  height: 150px;
  width: 150px;
  background-image: url('');
  background-color: #FFF;
  z-index: 0;
}
.lay:hover {
  opacity: 1;
}
<div class="overlay"></div>

<div class="een">
  <p class="drie">
    Lorem ipsum dolor sit amet, Show Me!
  </p>
</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

A guide on defining the width of an element within a flex container when it overflows

Here is the code snippet I have: .divA { background: red; width: 500px; display: flex; flex-direction: row; overflow-y: scroll; } .epi { width: 50%; background: blue; } <div class="divA"> <div class="epi"> <h1>dsds ...

css

ReactJs: difficulty in resetting input field to empty string

I have an application using React v 0.13.1 (Old version). I am struggling to update my input field to "" after retrieving the updated value from the database. Scenario: I am updating the input fields by clicking on the button named "Pull&qu ...

javascripthtmlcssreactjs

What is the process for creating a luminous sweeping animation on an SVG image or logo?

Is it possible to apply light sweep effect only on the SVG logo? The light sweep effect is triggered when hovering over the logo The effect should be limited to the path inside the SVG image .preloader { position: fixed; display: flex; align-ite ...

htmlcsspseudo-elementeffectslight

Switch up the webpage's font using a dropdown selection box

I'm interested in adding a drop-down box to my webpage that allows users to change the font of the site when they click on it. I attempted the code below, but it didn't seem to work. Any suggestions? Regards, Sam CSS .font1 p { font-family: " ...

htmlcssangularjs

Having trouble setting the CSS width to 100%

Is there a way to assert the CSS width of an element in NightwatchJS to be 100% without hard-coding the value? Currently, when I attempt to do so, it fails and reports that the width is 196px. The specific error message is as follows: Testing if element ...

javascriptcsstestingbddnightwatch.js

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

http://jsfiddle.net/gn3LL/ .error { background-color: red; } <input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge"> I am trying to remove the small white border around the inside of the inpu ...

csstwitter-bootstrap

Issues with Firefox's flexbox functionality are preventing it from working

Hey there, I've created a bubble menu with a button using code. It functions perfectly on Chrome but seems to have some issues on Mozilla Firefox. You can check it out and give it a try. $(".roundedBallOuter").click(function(e) { $(this).toggleCl ...

htmlcssfirefoxflexbox

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

I'm having trouble with aligning my sidebar vertically between the header and the bottom of the browser window. Currently, the bottom items are extending beyond the browser's bottom edge. How can I adjust this to ensure proper alignment? Here is ...

htmlcss

The drop-down menu is misaligned from its designated position underneath the title

Trying to incorporate a dropdown menu into my website, I am structuring the HTML as follows: <ul class="topnav"> <li> SECTION TITLE <ul class="subnav"> <li>One</li> <li>Two</li> ...

jqueryhtmlcssdrop-down-menu

Troubleshooting a Dynamic Navigation Bar Problem with jQuery Integration

Having developed a responsive navbar, an issue arises during iPad breakpoints where attempting to close the active navbar by clicking the hamburger icon triggers the jQuery script to also perform .removeClass(".active").slideToggle() on two buttons, causin ...

htmljquerycssresponsive-nav

Tips for styling an image and vCard within a Foundation accordion menu

I am working on a project that involves creating a list using an accordion feature to display names of individuals. When a user clicks on a person, I want the dropdown content to show their image and vcard details. How can I structure the content so that ...

javascriptjqueryhtmlcss

Prevent a div from being displaced by the transform property once it reaches the window's border

Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead? If you'd like to see the code, you can check it out here. var x=0, y=0 ...

javascriptjquerycssbordertransform

Google Map with rounded corners that have a transparent design

Trying to create a circular Google map using CSS3 border-radius, but having issues with browsers other than Firefox. Here's the code snippet: <div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;"&g ...

cssgoogle-maps-api-3

The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet: .dropdown-content { display: none; po ...

htmlcss

Angular2 Components with Unique Styling

I am working on an Angular2 app that includes several components, some of which I want to reuse multiple times on a single page. Instead of having three separate components, I am looking to refactor and combine their functionalities into one. The basic st ...

htmlcssangularangular2-template

Ways to set a background image for two separate components in Angular

Trying to figure out how to integrate this design: The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content component, making it tricky to ac ...

htmlcssangular

Gradually fade with JavaScript

My JavaScript code below is used to recursively reload a specific DIV with the results of a data query. The issue I'm facing is that each time the DIV, identified by id="outPut", is reloaded, all the data fades in and out due to the fadeTo function. ...

javascriptphpjquerycssfadeto

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Coding with JavaScript var changeHeight = () => { let flag = 0; while(flag != 1) { size += 1; return size; } if(size == window.innerHeight/2){ flag == 1; } } var size = 5; document.body.style.height = &qu ...

javascripthtmlcss

Having trouble getting the toggle menu to work using Jquery?

I am trying to create a toggle menu using jQuery on this particular page: . The menu is located in the top right corner and I want it to appear when someone clicks on the "Menu ☰" button, and then disappear when clicked again (similar to this website: ). ...

javascriptjquerycss

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

htmlcsstwitter-bootstrap