When hovering over the mouse on a button, a card shadow effect will appear

Hi there! I've implemented a hover effect on a card in my code. When the user hovers over the card, a shadow effect and an Add To Cart button will appear. However, I want to display the card shadow effect when the user hovers over the button as well. Can you please advise me on how to achieve this? Below is my HTML code along with its CSS.

/* overallCart */
.overallCart{
  min-height: 272.5px;
}

/* card */
.card5-diagonal {
  border-color: transparent;
  width: 170px;
  height: 247.5px;
  margin-top: 0px;
  margin-right: 15px;
  position: relative;
  overflow: hidden;
}
/* card overeffect */
.card5-diagonal:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* image*/
.card5-image {
  width: 144px;
  height: 122px;
  margin-right: 13px;
  margin-left: 13px;
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Over Button space*/
.button-space {
  display: none;
}
/* Over Button hover effect */
.overallCart:hover .button-space {
  display: block;
}
/* Button */
.addtocart-btn {
  min-width: 170px;
  max-width: 170px;
  min-height: 25px;
  max-height: 25px;
  background-color: #212121;
  color: #FFFFFF;
  font-family: RR;
  font-size: 12px;
  outline: none;
  border: #212121;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
 
 <div class="overallCart">
  <div class="card card5-diagonal">

    <!-- Image Start -->
    <img class="card5-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT05KW2maV5ZFB9ipDuXxFCg55Rwb6Grx3iiURgsOFMpWwWX27u" />
    <!-- Image End -->
 
  </div>
  <!-- Footer Start -->
  <div class="btn-space">
    <span class="button-space ">
      <button type="button" class="addtocart-btn ">ADD TO CART </button>
    </span>
  </div>
  <!-- Footer End -->
</div>
htmlcss

Answer №1

To achieve this effect, jQuery can be utilized.

$('.addtocart-btn,.card5-diagonal').hover(function(){
    $('.card5-diagonal').css('box-shadow','0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)');
}, function(){
    $('.card5-diagonal').css('box-shadow','inherit');
});

Furthermore, the code below should be removed from the CSS file.

/* card overeffect */
.card5-diagonal:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

A demonstration of this implementation can be viewed at: https://jsfiddle.net/Ls9eju6y/

Answer №2

If you need any changes, please review the following code snippets. Thank you.

/* overallCart */

.overallCart {
  min-height: 272.5px;
  width: 25%;
}


/* card */

.card5-diagonal {
  border-color: transparent;
  width: 170px;
  height: 247.5px;
  margin-top: 0px;
  margin-right: 15px;
  position: relative;
  overflow: hidden;
}


/* card overeffect */

.card5-diagonal:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
}


/* image*/

.card5-image {
  width: 144px;
  height: 122px;
  margin-right: 13px;
  margin-left: 13px;
  margin-top: 15px;
  margin-bottom: 15px;
}


/* Over Button space*/

.button-space {
  display: none;
}


/* Over Button hover effect */

.overallCart:hover .button-space {
  display: block;
}


/* Button */

.addtocart-btn {
  min-width: 170px;
  /* max-width: 170px; */
  min-height: 25px;
  max-height: 25px;
  background-color: #212121;
  color: #FFFFFF;
  font-family: RR;
  font-size: 12px;
  outline: none;
  border: #212121;
  width: 100%;
}

.card {
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="overallCart">
  <div class="card card5-diagonal">

    <!-- Image Start -->
    <img class="card5-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT05KW2maV5ZFB9ipDuXxFCg55Rwb6Grx3iiURgsOFMpWwWX27u" />
    <!-- Image End -->

  </div>
  <!-- Footer Start -->
  <div class="btn-space">
    <span class="button-space ">
      <button type="button" class="addtocart-btn ">ADD TO CART </button>
    </span>
  </div>
  <!-- Footer End -->
</div>

Answer №3

Here is a suggestion for you: 

$(document).ready(function () {
    $(".btn-space").hover(function () {
        $(this).prev().css("box-shadow", "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)");
    }, function () {
        $(this).prev().css("box-shadow", "");
    });
});
.overallCart {
    min-height: 272.5px;
    width: 25%;
}
        
.card5-diagonal {
    border-color: transparent;
    width: 170px;
    height: 247.5px;
    margin-top: 0px;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}

.card5-diagonal:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
}

.card5-image {
    width: 144px;
    height: 122px;
    margin-right: 13px;
    margin-left: 13px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.button-space {
    display: none;
}

.overallCart:hover .button-space {
    display: block;
}
.addtocart-btn {
    min-width: 170px;
    /* max-width: 170px; */
    min-height: 25px;
    max-height: 25px;
    background-color: #212121;
    color: #FFFFFF;
    font-family: RR;
    font-size: 12px;
    outline: none;
    border: #212121;
    width: 100%;
}
.card {
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
<div class="overallCart">
    <div class="card card5-diagonal">
        <img class="card5-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT05KW2maV5ZFB9ipDuXxFCg55Rwb6Grx3iiURgsOFMpWwWX27u" />
    </div>
    <div class="btn-space">
        <span class="button-space ">
            <button type="button" class="addtocart-btn ">ADD TO CART </button>
        </span>
    </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

The Art of Revealing an Element

Is it possible to manipulate a parent div element in JavaScript without affecting its child nodes? For example, transforming this structure: <div class="parent"> <div class="child"> <div class="grandchil ...

javascripthtml

Unable to understand the reason behind why the button is not being displayed

I'm having trouble with my quiz app. I have a button to submit answers and move on to the next question, but whenever I try to place it within the div that contains the quiz, the button disappears. Can someone please help me figure out what's wro ...

javascriptjqueryhtmlcss

Creating header menus with section labels in Windows 8 Metro can be easily accomplished by utilizing Javascript

Is there a way to create a navigation menu in Windows 8 Metro JavaScript that includes header menus and section labels, similar to the example shown below? ...

javascripthtmlmicrosoft-metrowinjs

Achieving equal height for two divs and centering them

Is it possible to align the height of two floated divs so that the second div slips down, and the container width automatically adjusts to fit the child width while centering the divs? I apologize for any language errors. :( <!DOCTYPE html PUBLIC "-//W ...

htmlcsscss-float

Simple HTML editors in django modified for non-employee, authorized individuals to utilize

I need a solution for allowing users to create HTML content securely, with basic editing capabilities. It should also include server-side HTML sanitization and the ability to upload images/files. The editor needs to be extremely user-friendly, as the audie ...

htmldjangosecuritywysiwygusability

Is it possible that my PHP script will not accept my POST request if I initially

Recently, I developed a dynamic signature generator for my online game. To create your own signature, you can manually access it via I attempted to simplify the process by creating a userbox where users don't have to visit and edit it. My goa ...

phphtmldynamic

Tips for locking the button in the navigation bar while scrolling

I noticed that when I have 6 fields in my navbar, with 5 of them being links and one as a dropdown, the scrolling of the page causes all fields to remain fixed except for the dropdown field.Check out this image description for reference https://i.stack.im ...

javascriptcsshtmlbootstrap-4

Switch between showing and hiding a div by clicking on the panel header and changing the symbol from + to

I need assistance with a panel feature on my website. The panel should expand when the "+" symbol is clicked, displaying the panel body, and the "+" symbol should change to "-" indicating it can be collapsed by clicking it again. There is a slight twist t ...

javascriptjqueryhtmlcss

What is the best way to display various tables depending on the grouping of a specific row value?

Recently, I came across some interesting JSON data that looks like this: [ { "fruit":"apple", "country": "A" }, { "fruit":"banana", "country": "b" }, { "fruit":&q ...

htmlangulartypescriptag-grid

What is the functionality of react.js state?

As I delve into learning React.js, I've been quite impressed with its state management capabilities. However, I'm curious about the technical workings behind it. Does React.js utilize cookies or browser storage for its state management? ...

javascripthtmlreactjs

Using Flask to extract data from HTML pages

Simple inquiry: I am using Flask and I need to extract the string value from this array. I am familiar with utilizing request.form["name"], but I am unsure of how to give this variable a name. How can I retrieve this variable in order to display it on my s ...

pythonhtmlflask

Issue with Internet Explorer 7: Floating elements are incorrectly positioned below their intended placement

Upon visiting using IE7, you may notice that the two middle columns are being pushed down to the bottom of the page. I have attempted to resolve this issue by applying display:inline to both columns without success. Any assistance on this matter would be ...

cssinternet-explorer-7

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS ...

javascripthtmljquerycssscss-mixins

Problem with animated scrolling in Jquery

Currently, I am working on a function that aims to smoothly scroll the web to a specific div each time a user scrolls "into" a container div. You can get a better idea of what I mean by looking at my JSFiddle. Everything works perfectly when the user scro ...

javascriptjqueryhtmlcss

Troubleshooting Media Queries Problems in HTML and CSS

Check out the code snippet below: //Modifying text content (function() { var texts = $(".altered"); var textIndex = -1; function displayNextText() { ++textIndex; var t = texts.eq(textIndex) .fadeIn(2000) if (textIndex < te ...

javascripthtmljquerycssresponsive-design

What is the best way to vertically center text within a selection box? (This is not referring to a select box or a div box)

While assigning a line-height to text elements like div, span, or p and dragging them in the browser, an unsightly empty space appears within the selection box: https://i.sstatic.net/Ws08H.png I am seeking a way to elevate the actual text content within ...

htmlcsstextalignmenttextselection

My goal is to extract the usernames of all sellers from the Poshmark webpage using a combination of JavaScript, Cheerio, and Axios

After experimenting with various methods, I've come close to the solution, but it only retrieves one of the div elements I'm looking for... Although I managed to retrieve multiple divs at one point, when I attempted to extract text using the .te ...

javascripthtmlnode.jscheerioaxiom

Dynamic HTML binding with v-model in Vue JS allows for seamless two-way

I recently incorporated Vue Js into my main MVC application. I want to be able to bind a Vue Js v-model to dynamically loaded HTML from a partial view. For example, in my partial view, I have the following: <input type="text" id="firstNam ...

htmlvue.jsmodel-view-controllerv-model

The carousel caption in Bootstrap 5 vanishes when viewing the website on a smaller device

Currently, I'm dealing with an issue using bootstrap carousel code. The carousel text displays properly on desktop screens but disappears when viewed on smaller sized screens. It appears that the text is being hidden behind the image. Various attempts ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

The issue with color swapping in Internet Explorer is not functioning correctly due to

I am facing an issue with a jQuery script that I have created to change the background colors of rows in a large table. Unfortunately, it seems to be malfunctioning on Internet Explorer versions 6 through 9. Below is the snippet of code I am using: <s ...

jquerycssinternet-explorer