Creating Dynamic Effects on Bootstrap Cards with CSS or jQuery

As I work on developing a website's frontend using Bootstrap/Html/Css, I have encountered a minor issue with css. I have created two cards using bootstrap cards and I am trying to implement an Overlay effect or Flip effect on them. However, I am unsure of the easiest way to apply this switching effect on the two cards.

Any help related to Css or Jquery in achieving this would be greatly appreciated.

Below is my Bootstrap Code for the Cards :

<div class="col-sm-6">
    <div class="today-special">
        <h4>Today Special</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="card card-one">
                        <img class="card-img-top" src="images/320x210.png" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Pizza Marinara</h5>
                                <p class="card-text">80.96</p>
                            </div>
                    </div>
                </div>
    
                <div class="col-sm-6">
                    <div class="card card-two">
                        <img class="card-img-top" src="images/320x210.png" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Chicken Noodles</h5>
                                <p class="card-text">50.10</p>
                            </div>
                    </div>
                </div>
            </div>   
     </div>
</div>

CSS for the Cards :

.today-special{
    text-align: left;

            .card-one{
                width:14rem;
                border: 1px solid #888888;
                border-radius: unset;
                box-shadow: 4px 5px 15px 1px #888888;

                 .card-text{
                     color: #FEA200;
                     font-weight: 500;
                    }
              }

             .card-two{
                  width:14rem;
                  border: 1px solid #888888;
                  border-radius: unset;
                  box-shadow: 4px 5px 15px 1px #888888;

                   .card-text{
                       color: #FEA200;
                       font-weight: 500;
                      }
               }    

          .card-img-top{
               border-radius: unset;
           }    
      }

Currently, the appearance of my two bootstrap cards is as follows:

https://i.sstatic.net/eRO0P.png

I aim to have the cards look like this:

https://i.sstatic.net/EdeMv.png

jqueryhtmlcssbootstrap-4

Answer №1

Enhance the appearance of wrapper DIVs by adding shadows,
When hovering, increase the z-index of the current card and apply a shadow as well

http://jsfiddle.net/31vrmjna/

.card{

  &-wrapper {
    padding: 0;
    box-shadow: 0 10px 60px 0 rgba(0,0,0,0.2);
  }

  z-index: 1;
  border-radius: unset;
  border: 0;
  transition: 0.4s;

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 40px 0 rgba(0,0,0,0.4);
    z-index: 2;
  }

  &-text{
    color: #FEA200;
    font-weight: 500;
  }

  &-img-top{
    border-radius: unset;
  }  
}

<link rel=stylesheet href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="col-sm-6">
  <div class="today-special">
    <h4>Today Special</h4>
    <div class="row">
      <div class="col-sm-6 card-wrapper">
        <div class="card">
          <img class="card-img-top" src="//placehold.it/320x210/0bf" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Pizza Marinara</h5>
            <p class="card-text">80.96</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 card-wrapper">
        <div class="card">
          <img class="card-img-top" src="//placehold.it/320x210/f0b" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Chicken Noodles</h5>
            <p class="card-text">50.10</p>
          </div>
        </div>
      </div>
    </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

Moving elements upwards and downwards using CSS transitions

I am currently designing a metro tiles menu for my website, without using JavaScript and only relying on HTML and CSS. The issue I am facing involves the sliding tiles and the direction in which they slide. Additionally, there seems to be a problem where ...

htmlcsscss-transitions

Achieving (keyup.enter) event on an option within a datalist in Angular 6

How can I trigger the (keyup.enter) event on an option within a datalist in Angular 6? This is my HTML Code: <input list="filteredArray" (keyup)="filterEmployee(empForm.controls['empname'].value)" type="text" formControlName="empname" /> ...

angularhtmltypescript

Insert a unpredictable number into the iframe's source URL

Can you generate a random number to add behind ?i= <li> <strong>&nbsp; &nbsp;Clip</strong>&nbsp;2<br> <iframe src="https://mysite.ml/links/clip2.html?i=" height="350" width="600" frameborder="0" scrolling="no" ...

htmlurliframerandom

JavaScript/jQuery - dynamic name selector with animation

I've been working on developing a raffle ticket picking script using JS and jQuery. Initially, my script is functioning well. However, I am now looking to enhance its visual appeal so that it can be operated in assembly. In order to achieve this, I ...

javascriptjquery

Displaying CSS source on a webpage using Polymer 2.0 style modules for sharing styles

I have implemented a style module using Polymer 2.0 (https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules). The styles are functioning properly in Firefox, but in Chrome, the CSS content is displaying as jumbled characters on t ...

csspolymer-2.0

How can we halt the animation on a specific element using jQuery?

Is there a way to unbind an animation applied to a single element, such as div.animate()? I attempted using div.unbind() and div.unbind("animate"), but it did not work... Any suggestions or help would be greatly appreciated. Thank you! ...

jqueryjquery-animateunbind

The element referenced by `$(this)` in jQuery seems to be

I have multiple forms on a single page that are very similar in structure. Some of the forms contain elements with a css class that triggers an onchange event handler. This is in an ASP.NET MVC environment. $('.check-changes').on('change&apo ...

jqueryasp.net-mvcbootstrap-4

Disabling buttons in Angular and displaying error messages for mat-input

I'm facing an issue with a text box and a button. The user inputs a URL into the textbox, and there's a method called isUrlFormatValid() to validate the URL format. The problem is that when the page first loads, the isUrlFormatValid() method aut ...

javascripthtmlangularangular-materialangular-forms

How can one ensure that a table remains responsive despite facing constraints?

In my responsive website, I've encountered an issue with the table I created. While it is responsive up to a certain width, beyond that point, it displays poorly. Are there any alternative solutions to solve this problem effectively? ...

jqueryhtmlcss

What is the best way to display an empty record in a table utilizing JSON?

I am facing an issue with parsing a JSON file that contains information about movie nominees and their win probabilities. The goal is to display this data in a table where the WinType field determines whether the nominee has won or been nominated for an aw ...

javascriptjqueryarraysjsonobject

Using @at-root seems to be causing an error when combining the "a" selector with

I encountered an issue when attempting to use @at-root and Interpolation in my Sass code. Despite using a standard example for testing, I still receive an error: .button { @at-root a#{&} { color: green; } } Error sass/Site.scss (Line 28 of s ...

cssrubywindowssasscompass

Directives for conditions if Internet Explorer is greater than or equal to 9, or if it is not

Embarking on a new project, I find myself in the unfortunate position of having to support IE7 & IE9. However, my goal is to eventually phase out IE7 support smoothly. Ideally, I aim to utilize the latest versions of libraries wherever possible. < ...

javascriptjqueryhtmlinternet-explorer

The dropdown menu in the bootstrap is not being properly filled with content on the webpage

In my header file, I am attempting to add a bootstrap dropdown that will display the user id along with two other options in the dropdown menu. Within the header file, I have created a new div element for the dropdown and linked it to a php file where the ...

phpjqueryhtmlcsstwitter-bootstrap

Unable to retrieve the most recent global variable value within the confirmation box

<script type="text/javascript"> var customDiv ="hello"; $(function () { var $form = $("#authNotificationForm"); var startItems = $form.serializeArray(); startItems = convertSerializedArrayToHash(startItems); $("#authNoti ...

javascriptjquerydialogmodal-dialogconfirmation

Steps to execute ajax calls in a sequential manner

Here is a function called loadGraphInSeq that loads graphs in a sequence based on certain conditions. The function iterates through all the div elements with class .graph_box and checks if they are displayed (not hidden). Depending on the name of the graph ...

javascriptjqueryajax

What is the best method for assigning real-life units, such as centimeters or millimeters, to a dimension

Is there a way to set the height of an img in millimeters, regardless of the device being used? Currently, setting the CSS rule height: 10mm; actually translates to height: 37.8px, as explained in this link: http://css-tricks.com/the-lengths-of-css/ If p ...

jqueryhtmlcssresponsive-designmedia-queries

Retrieve the key value from the specified input ID using jQuery

I have a list containing multiple input fields <input type="hidden" id="elevens_id_ea" value="<?php echo $_GET['elev_id']; ?>" /> <input type="hidden" id="arskursen_ea" value="<?php echo $arskursen; ?>" /> <?php if ($ ...

phpjquery

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

cssionic-frameworksass

Is there a way to adjust the width of a Material UI / React table?

Currently developing an application using React.JS and Material UI. Utilizing the table component for my project, I have been successful in adjusting the column width but encountered difficulties when attempting to modify the overall table width. The goa ...

cssreactjsmaterial-ui

"Localhost autocomplete feature is functional, however, it is not working on the server

I am facing an issue with a search form that has an autocomplete feature. It works perfectly fine on my local machine, but when I upload it to a remote server, it stops functioning. Can someone please assist me with this problem? Below is the code snippet ...

phpjqueryajaxserverlocalhost