Show text overlay and add image opacity when hovering

My goal is to create a hover effect on an image where it becomes semi-transparent and displays text that is initially hidden using display: none. Right now, when I hover over an image, it does become semitransparent (.single-image:hover is working), but the text doesn't show up. When the text was visible (not set to display: none), it appeared over the image in the bottom left corner. I assumed that since it's positioned over the image, the hover pseudo-class would trigger its visibility. I also attempted setting the z-index of .attribution to 1, but that didn't have any effect.

<div className="image-container">
    <a href={image.links.html} target="_blank" rel="noopener noreferrer">
       <img className="single-image" src={image.urls.regular} alt="" />
       <p className="attribution">Unsplash</p>
    </a>
 </div>

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

    /* Text */
    .attribution {
      display: none;
      color: white;
      position: absolute;
      bottom: 20px;
      left: 20px;
    }

    .attribution:hover {
      display: block;
    }

    .single-image {
      margin: 7px;
      height: 350px;
      width: 350px;
      object-fit: cover;
    }

    .single-image:hover {
      opacity: 0.7;
      transition: 0.5s;
    }
css

Answer №1

For optimal functionality, it is recommended to relocate the hover function to the parent div.

To achieve this, you will need to modify the CSS selectors by changing .attribution:hover to 

.image-container:hover .attribution
and .single-image:hover to 
.image-container:hover .single-image
.

In an interesting turn of events, adding a border or background-color to the parent div is essential for the desired outcome. If you're curious about why this is necessary, you can read more here.

I incorporated a transparent color using 

background-color: rgba(0, 0, 0, 0);
.

.image-container {
  display: inline-block;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}

/* Text */
.attribution {
  display: none;
  color: white;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.image-container:hover .attribution {
  display: block;
}

.single-image {
  margin: 7px;
  height: 350px;
  width: 350px;
  object-fit: cover;
}

.image-container:hover .single-image {
  opacity: 0.7;
  transition: 0.5s;
}
<div class="image-container">
    <a href="#" target="_blank" rel="noopener noreferrer>
       <img class="single-image" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" alt="" />
       <p class="attribution">Kitten!</p>
    </a>
 </div>

Answer №2

.cont { 
    position: relative; 
    height: 150px;
    width: 150px;
    margin: 1em auto;
    background-color: red;
}
.layer { 
    position: relative; 
    height: 150px;
    width: 150px;
    color: Transparent;
}
.layer:hover { color: white; }
.cont:hover { background-color: blue;}
<div class="cont">
  <div class="layer">My cool Text</div>
</div>

Instead of setting the font color to transparent, why not follow my example where I demonstrate a simpler approach? It only took me 2 minutes to put together...

Answer №3

To create a visual effect where the text appears alongside the image fade, you can add some JavaScript code. Normally, only one element can be in a hover state even if they are stacked on top of each other. However, with some manipulation of JavaScript, you might be able to achieve a "hack" for a double hover state.

Give this a try:

    <div className="image-container">
      <a href={image.links.html} target="_blank" rel="noopener noreferrer">
        <img className="single-image" src={image.urls.regular} alt="" />
        <p className="attribution">Unsplash</p>
      </a>
    </div>

.image-container {
  display: inline-block;
  text-align:center;
  position: relative;
  z-index:1;
}

/* Text */
.attribution {
  display: none;
  color: white;
  position: absolute;
  z-index:3;
  bottom: 20px;
  left: 20px;
}
.single-image {
  margin: 7px;
  height: 350px;
  width: 350px;
  object-fit: cover;
  z-index:2;
}

.single-image:hover {
  opacity: 0.7;
  transition:opacity 0.5s ease-in-out;
  will-change:opacity;
}

    <script>
    document.addEventListener(DOMContentLoaded,(e)=>{
    const img = document.getElementsByClassName('single-image')[0];
    const attrib = document.getElementsByClassName('attribution')[0]; 

     img.addEventListener('mouseover',(e)=>{
        img.style.opacity = '0.7';
        attrib.style.display = 'block';
     });

    });
    </script>

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

Hexagonal design reminiscent of a beehive

I am struggling with implementing a specific layout using grid CSS and I'm open to using flex or any other method. .container { display: grid; grid-template-columns: repeat(auto-fit, 50px); grid-template-rows: repeat(auto-fit, minmax(80px, 80px)); ...

htmlcssgrid

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

I am encountering a problem with validating my form using JavaScript

I've been working on a project where I'm developing a website using JavaScript, HTML, and CSS to search for movies and purchase tickets. While the basic functionalities are working fine, I'm encountering some challenges with form validation. ...

javascripthtmlcss

Adjusting CSS styling based on screen orientation changes when resizing a browser window on a

I'm uncertain about the functionality on desktop screens when it comes to resizing the browser window. My understanding is that changing the orientation should occur naturally when the height surpasses the width and vice versa after resizing. However ...

cssorientationmedia-queries

Having trouble displaying API JSON data in a Vue.js table component

In my HTML file, I have implemented fetching data from an API and displaying it in a table successfully. Now, I am trying to convert the HTML file to use Vue.js, but encountering some issues. Despite being able to fetch data from the API with Vue, the tab ...

jqueryhtmlcssjsonvue.js

Can both Bootstrap 5 scroll-spy methods be utilized simultaneously on a single webpage?

I have a requirement for my website to have 2 navigation bars and also 2 sets of navigation links. I would like to implement scroll-spy functionality on both navigation bars, even though only one will be visible at a time. The issue I am facing is that w ...

htmlcssbootstrap-4bootstrap-5scrollspy

Is it feasible to automate daily updates for CSS files?

Currently working on a website using Hugo, a static site generator. I'm curious if there's a method to automatically update my CSS files at the same time daily. The goal is to have a specific title font change every day on the website. Is it feas ...

javahtmlcsswebfrontend

Hiding the +/- button in Vue.js based on specific conditions

Is there a way to hide the +/- button when there are no items below? Current Challenge Example Sandbox Link <template v-for="item in SevenLengthlist" :key="item"> <ul> <li><input type="checkbox" id ...

htmlcssvue.js

The keyboard on a mobile device is oversized when the device is in landscape mode

Currently developing a website optimized for tablet use in landscape mode. However, running into an issue where the keyboard takes up half of the screen size when tapping into an input box in this mode. It works perfectly fine in portrait mode, but the k ...

htmlcss

Triggering a jQuery event when a CSS property is altered

My current approach involves utilizing the .animate method to shift a div 100px to the right in just 1 second. Essentially, this means moving by 1px every 10ms. I am now exploring whether there exists an event that could be triggered after each individual ...

javascriptjquerycssevents

Effective ways to enable users to upload files in a React Native app

Being in the process of developing a react native app, I am faced with the challenge of allowing users to easily upload files from their mobile devices (pdf, doc, etc). Unfortunately, my search for a suitable native component has proven fruitless. Can anyo ...

cssjavascriptreact-native

How can I customize the appearance of the arrow in a Material UI tooltip?

Looking to enhance the appearance of a Material UI tooltip arrow with custom styling, but struggling to set the border and background colors. Here's the current configuration in React: const useStylesBootstrap = makeStyles(theme => ({ arrow: { ...

cssreactjsmaterial-ui

Tap on an unfilled section of a full-size element to assign a class

I need to remove the .visible class when clicking in the empty space of a full-height header. The header contains a container that does not have full height. Clicking on the container or its links should not trigger the removal of the class, but clicking ...

javascriptjqueryhtmlcss

Display not refreshing as expected

Just to clarify, I am new to working with Angular. I've been struggling for the past few hours to toggle authentication in my service by clicking a button that should display user information or a sign-in image based on whether the authentication is ...

javascripthtmlcssangularjsdom

The Bootsrap 5.3 navbar is not fully extending to the width of the page

My goal is to have the list items in a Bootstrap navbar stretch across the width of the page in mobile view, but I'm having trouble achieving this. I've tried following various tutorials without success. I even attempted using *{margin:0;padding ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

What specific elements do square brackets in a CSS selector target within an HTML document?

Recently, I came across a CSS rule-set in a library: [text-uppercase] { text-transform: uppercase; } I am intrigued by this and would like to implement it in a div <div class="text-uppercase | [text-uppercase]"></div> Unfortunately, neit ...

csscss-selectors

Align the images in a div to the center of the page

After discovering a jQuery code that rotates images within a div, I am now aiming to centralize this entire process on the webpage. The CSS styles used for the images include: #rotating-item-wrapper { position: relative; } In addition, the following ...

htmlcss

Manipulating an SVG file with JavaScript

Within the HTML code, there is a photo already added as an SVG file. I am interested in learning how to enable the user to select between two options - either a cross or a zero. Upon clicking on the designated area, the chosen figure should appear (resembl ...

javascripthtmlcsssvgvector

When the screen becomes responsive, elements escape from the div

I'm encountering an issue with the code block below. When attempting to make the screen responsive, the elements within the aircard div are not stacking as expected. Instead, they seem to overflow. I'm unsure of the reason for this behavior and h ...

htmlcssbootstrap-4responsiveresponsiveness

The appearance of HTML dropdown select options is unappealing when viewed on iPhones

Looking for a simple alternative to the dropdown menu implementation on iPhones/iOS for a mobile website (not native app). Any suggestions using HTML/CSS/JavaScript? <!DOCTYPE html> <html> <head> <meta name="viewport" content="initi ...

javascriptiosiphonecss