Display an overlay image only when hovering over a Bootstrap 4 card

I have a Bootstrap 4 card that I am working with. Currently, when I hover over any part of the card, a transparent overlay covers the entire card. I would like to modify this effect so that the overlay only appears over the top image area of the card, not the entire card.

HTML:

<div class="m-4">
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
  <div class="card-overlay"></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
</div>

CSS

.card-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(0, 0, 0, 0.5);
  }

.card:hover .card-overlay {
    opacity: 1;
  }

Link to CodePen

htmlcssbootstrap-4

Answer №1

Your elements were all contained within the same container, causing the "card-overlay" div to occupy the space of the "card" div and affect all elements inside it. To resolve this issue, I created an additional container to accommodate both the image and the image-overlay.

The code modifications made are as follows:

HTML

<div class="m-4">
<div class="card" style="width: 18rem;">
  
  <!-- A div to hold img and img-overlay -->
  
  <div class="card-image">
    <img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
    <div class="image-overlay"></div>
  </div>
  <!-- -->
  
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
</div>

CSS

/* Changing img holder position, so the overlay will be related to it */

.card-image {
  position: relative;
}

.image-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(0, 0, 0, 0.5);
  }

.card:hover .image-overlay {
    opacity: 1;
  }

CodePen

Answer №2

The answer lies within the question itself as the overlay div occupies the entire space of the card, not just the image.

Check out this example on JSFiddle

<div class='wrapper'>
  <div class='img-wrapper'>
    <img src='https://via.placeholder.com/150x100'>
    <div class='overlay'></div>
  </div>
  <div>
    <h3>
      I AM A TITLE
    </h3>
    <p>
      content content content content content content content 
    </p>
  </div>
</div>


.wrapper {
  width: 250px;
  text-align: left;
  padding: 15px;
  border: 1px solid black;
}

.img-wrapper {
  position: relative;
}

img {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0);
  opacity: 0;
}

.wrapper:hover .overlay {
  opacity: .3;
}

Answer №3

To achieve the desired effect, simply wrap your image in a div with position: relative, and then place both the overlay and image within that div. Follow the example provided below to see how it can be done.

.card-img-top-wrapper{
  position:relative;
}
.card-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(0, 0, 0, 0.5);
  }

.card:hover .card-overlay {
    opacity: 1;
  }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />

<div class="m-4">
<div class="card" style="width: 18rem;">
  <div class="card-img-top-wrapper">
    <div class="card-overlay"></div>
    <img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</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

What is the best method for managing file storage and retrieval in web applications that only run on the client-side?

I'm currently working on an application where users can create their own data. Without a backend or database, all the information is stored within the user's session. My preferred solution involves: User interacts with the app, clicks "Save", ...

javascripthtmlofflinehtml5-filesystem

I'm working on creating an HTML page and I'm looking to change the up-arrow and down-arrow icons to a star and an information "i". Can anyone recommend how to

<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name ...

htmlcssmaterialize

Session storage conditional statement is not behaving as anticipated in JavaScript

I am currently working on session storage functionality where a user must select one radio button on the first page and then click the next button. On the second page, a div is supposed to show up. On the first page, I have created a function with a set of ...

javascriptjqueryhtmljsonsession-storage

The stylesheet is linked, but no changes are taking effect

I've linked my template.php to style.css, and when I make changes in template.php, they show up fine. However, if I make changes in the stylesheet, nothing happens. What should I do? My website is not live; I'm working on it using a WAMP server. ...

javascriptphphtmlcss

Conceal / reveal minuscule letters

Is it feasible to hide or select only the lowercase characters of a string using CSS? <p>Richard Parnaby-King</p> How can I display just RPK? While ::first-letter allows me to show the letter R, is there a way to go further with this? p ...

css

Utilize the :not() selector in combination with the :first-child() selector

Currently, I am seeking a method to merge two css selectors together in order to target specific elements. The selectors I am attempting to combine are ':not' and ':first-of-type'. Here is the code snippet that represents my current sit ...

htmlcsscss-selectors

Obtain the name of the checkbox that has been selected

I'm new to JavaScript and HTML, so my question might seem silly to you, but I'm stuck on it. I'm trying to get the name of the selected checkbox. Here's the code I've been working with: <br> <% for(var i = 0; i < ...

javascripthtmljsp

Adding a custom stylesheet to a particular table within an HTML document

Is it possible to apply an external CSS stylesheet to only one table out of several on the same page? ...

htmlcss

Ways to alter the appearance of individual characters in the text input

My latest project involves dynamically changing the CSS styles of each individual character in a given text input. For example, if the user types "Stack" into the input field, I want the 'S' to appear in red, 't' in blue, 'a' ...

javascripthtmlcssvue.js

Retrieving information from a database utilizing SQL queries

Looking for a way to list the number of orders and their total value without using sub-select in SQL? SELECT u.name, COUNT(o.id) AS order_count, SUM(oi.quantity * p.price) AS total_price FROM users u INNER JOIN orders o ON o.user_id=u.id LEFT JOIN ...

phphtmlmysqlsql

Tips for formatting nested Angular components in a visually pleasing manner:

Seeking guidance on the best approach for the following scenario: I have an angular component positioned at a specific route. Let's say the route is: /main-page Currently, the template spans the full width of the screen at this route. I want to add ...

htmlcssangularsass

which offline bootstrap files are necessary and which ones can we do without?

I recently downloaded Bootstrap and I'm unsure about which files are necessary and which ones aren't. While working on it, I became curious if anyone could provide some guidance on this matter? Any help would be greatly appreciated. ...

bootstrap-4

Choosing various li classes within a navigation bar

Struggling to pick the right JQuery elements for my portfolio site. The aim is to show/hide the .inner (Task) items by clicking on the .outer (Category) items, complete with rotating .arrows when the menu expands. Check out a similar question, along with ...

javascriptjqueryhtmlcss

Enhance your website with a stylish drop-down menu from inc.com

I am trying to create a drop and hide menu effect similar to the one on Here is my current demo: http://jsfiddle.net/elementhttp/56ThC/ $("#1").mouseover(function(){ //alert("aaaaaaaaaa"); just for testing $(".block2").stop().fadeToggle(700 ...

jqueryhtmlcss

Changing the visibility of a model in a method using the setVisible() method with Wicket Ajax

So in my code, I have: public class MyClass extends WebPage { static AjaxFallbackLink ddd = null; static AjaxFallbackLink dddd = null; (...) } Within the constructor, I have: ddd = new AjaxFallbackLink("previous") { @Override pub ...

javahtmlajaxbuttonwicket

Is there a way for me to choose every element excluding those contained within a specific div?

Check out my code snippet: <div class="car"> <div class="make">NISSAN</div> <div class="model">MICRA</div> </div> <div class="discontinued"> <div class="car"> <div class="make">FOR ...

htmlcsscss-selectors

Rotating the icon in Bootstrap Accordion upon opening

I am trying to customize a Bootstrap 4 accordion by conditional rotating the icon to point up when it is open and back down when closed. I managed to achieve this using CSS, but now I need to implement it conditionally based on active states rather than ev ...

javascripthtmljquerycsstwitter-bootstrap

Is there a speed advantage in Angular 2+ when using [disabled] instead of "disabled" in a template?

Let's analyze the differences between these two HTML snippets: <input formControlName="address" [disabled]=isDisabled/> <input formControlName="address" disabled={{isDisabled}}/> While it seems that the first option is more readable, I ...

htmlangular

Tips for modifying a singular line within a file using Java

After creating a Java program that enables users to generate a .html file for a website by inputting content into an array, I am now considering adding a feature that allows users to edit an existing css file. Specifically, I am thinking about offering us ...

javahtmlcss

The error message "Cannot read property 'option0' of undefined" occurs when using Node.js with Express and EJS

script.js var choices = { choice0: 11, choice1: 'choice1', choice2: 'choice2', choice3: 'choice3', choice4: 'choice4', choice5: 'choice5', choice6: 'choice6', choice7: 'choice7', choice ...

javascripthtmlnode.jsexpressejs