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;
   }
htmlcssimage

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 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 №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);
}

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

Options for Printing HTML - Explore Different Techniques for Creating HTML Printouts and Weigh the Advantages and Disadvantages

As I work on maintaining an application, I am faced with the task of printing out a report. However, my curiosity extends beyond this assignment as I wonder about the various ways to format an HTML page for optimal printing results and the advantages and d ...

htmlcssprinting

Which property within the <mat-option> element is used for toggling checkboxes on and off?

I'm experimenting with dynamically checking/unchecking a checkbox in mat-option. What attribute can I use for this? I've successfully done the same thing with mat-checkbox using [(ngModel)]. Here's the snippet of my code: app.component.html ...

htmlangulartypescriptcheckboxangular-material

Sending an array through HTML select using Jquery

Is this scenario possible: I have implemented an Ajax call to fetch results from a SQL query. The data is retrieved in an array format, which I then convert to JSON and output at the end of a PHP script that the Ajax function calls. Next, for each row in ...

jqueryhtmlarraysselect

FormView does not have a defined namespace prefix asp - How should I specify my Page Directive?

After creating a basic web page using Microsoft Expression Web 4 with an ASP Connection to a local Access DB, I encountered an error when navigating to the page from another webpage. The browser displayed the following errors: Error: Namespace p ...

htmlasp.netforms

Executing a C# program that sends a web request without using JavaScript

My goal is to programmatically download the contents of a website, but it seems like this content is being loaded through ajax calls. Interestingly, when I disable javascript in my browser, only one request is made by the page and all the content is displa ...

c#javascripthtmlajaxhttpwebrequest

Steps for adding a background image in ASP.NET MVC4

I recently removed the reference to the master page from the head section @{ Layout = null } After making changes in my CSS: html { background-image:url('Images\BGP.jpg'); } However, I didn't see any changes. Any suggesti ...

cssasp.net-mvchtml

Basic HTML Audio Player Featuring Several Customizable Variables

I have a unique API that manages music playback. Instead of playing audio in the browser, it is done through a Discord bot. Achievement Goal https://i.stack.imgur.com/w3WUJ.png Parameters: current: indicates the current position of the track (e.g. 2:3 ...

javascripthtmlcssangular

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

Customizing the HTMLElement class to modify particular attributes

Is there a way to modify the behavior of an HTMLElement's scrollTop property by adding some extra logic before updating the actual value? The common approach seems to be deleting the original property and using Object.defineProperty(): delete element. ...

htmltypescriptinheritancepropertiesadapter

Changing styles with the use of bootstrap.css themes on the fly

I'm experimenting with toggling between a custom dark and light theme in my MVC application. On the _Layout.cshtml page, the default theme is loaded by the following code: <link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original. ...

javascripthtmlcssasp.net-mvc

The DOMDocument class in PHP allows you to manipulate a tree of nodes

Is there a way to transform HTML syntax into a node tree resembling the structure of an unordered list (<ul> element) using the DOMDocument class in PHP? $html = ' <div> <p> <a> </p> </d ...

phphtmlhtml-parsingdomdocument

Warning from Google Chrome: Ensure password forms include optional hidden username fields for improved accessibility

Upon visiting the "reset password" route of my single-page application and checking the Chrome browser console, I am presented with a warning message: [DOM] Password forms should contain (optionally hidden) username fields for accessibility: (More info: g ...

htmlangularformsgoogle-chrome

Is it possible to modify the value on the src img tag prior to scraping the data

Hey everyone, check out this piece of code I have: foreach ($image as $snimka){ $url = $snimka->src; $ch = curl_init($snimka->src); $fp = fopen('images/' . basename($url), 'wb'); curl_setopt($ch, CURLOPT_FILE, $fp ...

phphtmlweb-scraping

Can using $.ajax to submit a form be considered contradictory?

Currently, I am engaged in developing an MVC application that heavily relies on jQuery and HTML forms. However, I have started to notice a conflict between the two... For instance, I have had to prevent the default form submission to execute my AJAX call ...

jqueryhtmlasp.net-mvcajax

Customize the background color of Material UI input components on standard labels

Currently using react material ui and interested in changing the background color of a standard input. The issue arises when the label is overridden by the background color when the input is not selected. Input selected Input not selected This is my att ...

cssmaterial-ui

Navigating through a Single Page Application (SPA) can be achieved without

Can the CSS (Level 4) @document rule handle URLs that have the # symbol or include query parameters? For those who are not familiar with this topic Currently, only Firefox supports this feature with the @-moz-document prefix. If other browsers start supp ...

javascripthtmlcssroutessingle-page-application

What is the correct way to submit a formarray in an angular application following the specified format?

When submitting a form in Angular, I'm facing an issue where only the data from the first index inside the role menu is being passed. How can I ensure that all index data is passed on submit? { "roleMenu":[{ "menu":{ "menuId": 1 }, ...

htmlangulartypescriptangular8angular11

How can I ensure the text remains centered within a div, even when there are buttons aligned to the left or

I have a CSS class called .text-align-center that I used to center text. .text-align-center { text-align:center; } However, I noticed that when there is a left or right arrow icon within the <div>, the text does not appear perfectly centered. Is ...

htmlcss

Tips for preventing redundant data entry in a table

Currently, my table displays like so: The structure of the HTML for the table is as follows (only a snippet is shown, as the rest looks similar): <table class="table table-bordered table-condensed"> <tr> <th>Days</th> ...

htmlangularjs

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

javascripthtmlcssmenuhtml-lists