Overlay text on top of image with fading transparency when hovering over it

Question

Overlay text on top of image with fading transparency when hovering over it

Is there a way to make the transparent layer that appears when hovering over an image on a card only cover the image itself and not extend onto the footer of the card?

Currently, the image on the card covers most of it, and I want the hover overlay to behave in the same way.

Card without Hover Image Card with Hover Image

   .card {
   position:relative;
   width: 350px;
   height: 335px;
   background-size: contain;
   background-repeat: no-repeat;
   background-color: #fff;
   border-radius: 5px;
   margin: 30px;
   float: left;
   }

   #card_oslo{
   background-image: url(img/oslo.jpg);
   }
   #card_oslo:hover{
   box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
   transition: .5s;
   }

html css image

Answer 1

Answer №1

To achieve this effect, utilize a pseudo-element. Implement either :after or :before and ensure it is set to full size by setting the parent with position:relative. Then, modify the opacity of the pseudo element on hover.

Here's a demonstration.

.box {
  position:relative;
}
.box:after {
  content:"";
  /* Set the element as full-size */
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  /* Set bg and hide the element + animation */
  background-color:#000;
  opacity:0;
  transition: all 0.5s ease 0s;
}
.box:hover:after {
  /* Show the overlay on hover */
  opacity:0.5;
}

/* For the demo */
.box {
  width:200px;
  height:200px;
  background-color:red;
}

<div class="box"></div>

Answer 2

To achieve this effect, utilize a pseudo-element. Implement either :after or :before and ensure it is set to full size by setting the parent with position:relative. Then, modify the opacity of the pseudo element on hover.

Here's a demonstration.

.box {
  position:relative;
}
.box:after {
  content:"";
  /* Set the element as full-size */
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  /* Set bg and hide the element + animation */
  background-color:#000;
  opacity:0;
  transition: all 0.5s ease 0s;
}
.box:hover:after {
  /* Show the overlay on hover */
  opacity:0.5;
}

/* For the demo */
.box {
  width:200px;
  height:200px;
  background-color:red;
}

<div class="box"></div>

Answer 3

Answer №2

To create a full overlay on a card, you can set the following CSS properties:

position: absolute;
top: 0;
bottom: XXpx;
left: 0;
right: 0;

In the code above, replace XX with the height of the footer to cover the entire card except for the specified pixels at the bottom. You can also use percentage values instead of pixels.

If you want the overlay to display text, you should place it in a separate div element which can then be styled as an overlay.

You can view a simplified version of this implementation on https://jsfiddle.net/0L9fL1pj/

Answer 4

To create a full overlay on a card, you can set the following CSS properties:

position: absolute;
top: 0;
bottom: XXpx;
left: 0;
right: 0;

In the code above, replace XX with the height of the footer to cover the entire card except for the specified pixels at the bottom. You can also use percentage values instead of pixels.

If you want the overlay to display text, you should place it in a separate div element which can then be styled as an overlay.

You can view a simplified version of this implementation on https://jsfiddle.net/0L9fL1pj/

Answer 5

Answer №3

After searching for a similar solution and realizing that this thread didn't have a satisfactory answer, I decided to share my own solution based on the important clues I found here. Hopefully, this will help anyone facing a similar issue.

You can view a simple demo of my solution here: https://jsfiddle.net/Tdesign/2ynuajk0/14/

Here is the HTML code:

<div id="imgBox2" class="shade">
    <img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" width="350" height="335" loading="lazy" >
</div>

And here is the corresponding CSS:

#imgBox2 {
    position: relative;
    width: 500px;
}

.shade:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 500px;
    background-color: rgba(0,0,0,0.5);
}

Answer 6

After searching for a similar solution and realizing that this thread didn't have a satisfactory answer, I decided to share my own solution based on the important clues I found here. Hopefully, this will help anyone facing a similar issue.

You can view a simple demo of my solution here: https://jsfiddle.net/Tdesign/2ynuajk0/14/

Here is the HTML code:

<div id="imgBox2" class="shade">
    <img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" width="350" height="335" loading="lazy" >
</div>

And here is the corresponding CSS:

#imgBox2 {
    position: relative;
    width: 500px;
}

.shade:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 500px;
    background-color: rgba(0,0,0,0.5);
}

Overlay text on top of image with fading transparency when hovering over it

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to improve the design of this division that includes buttons?

What is the answer to this issue where the entity name is required to directly come after the "&" in the entity reference?

I'm looking for a way to display the value stored in a variable within an ejs template. Any suggestions

Modify all the content within the DIV using Regex, while keeping the HTML tags intact

What is causing my server to mysteriously alter the style of index.html?

Styling targeted div class elements with specific input elements

Conceal the parent div from its sibling within the same parent container

Executing PHP code from a list item

changing the css transformation into zoom and positioning

Eliminate the cushioning on a single item

Remove the blue outline in Fancybox when clicked

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

Clashing CSS Styles: Font Size Edition

Different option for animated side slider based on location

Display the names of files depending on the selection made in the drop-down menu

Unable to align a 1px element with the primary border

Can you provide guidance on how to showcase the chat date and time for each message in a webchat created with the bot framework SDKV4 using C#

I am curious about how to implement overflow:hidden along with position:sticky in React.js

The Carousel feature functions properly with 3 or more slides, but malfunctions when there are only 2 slides present

Effortlessly sending multiple forms on a single page via POST in Express JS without the need for page refresh