title: Overlay Effect / Switching Effect on Bootstrap Cards Using Css or Jquery
body: <p>I am developing a site's frontend in Bootstrap/Html/Css...Currently i am facing a small issue in css.I have created two cards using bootstrap cards and i am trying to apply Overlay effect or Flip effect on these two cards...I dont know what is the easiest way to apply this switching effect on two cards.</p>
  
  <p>Any Help related to Css or Jquery would be highly appreciated.</p>
  
  <p><strong>Here is my Bootstrap Code for Cards :</strong></p>
  
  <pre><code>               &lt;div class="col-sm-6"&gt;
                    &lt;div class="today-special"&gt;
                      &lt;h4&gt;Today Special&lt;/h4&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;div class="card card-one"&gt;
                                &lt;img class="card-img-top" src="images/320x210.png" alt="Card image cap"&gt;
                                &lt;div class="card-body"&gt;
                                  &lt;h5 class="card-title"&gt;Pizza Marinara&lt;/h5&gt;
                                  &lt;p class="card-text"&gt;80.96&lt;/p&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;div class="card card-two"&gt;
                                &lt;img class="card-img-top" src="images/320x210.png" alt="Card image cap"&gt;
                                &lt;div class="card-body"&gt;
                                  &lt;h5 class="card-title"&gt;Chicken Noodles&lt;/h5&gt;
                                  &lt;p class="card-text"&gt;50.10&lt;/p&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;   
                    &lt;/div&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS for the Cards :</strong></p>
  
  <pre><code>.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;
              }    
          }
  </code></pre>
  
  <p><strong>Currently My two bootstrap cards look like this :</strong></p>
  
  <p><a href="https://i.stack.imgur.com/eRO0P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eRO0P.png" alt="enter image description here"></a>     </p>
  
  <p><strong>I need these cards to look like this :</strong></p>
  
  <p><a href="https://i.stack.imgur.com/EdeMv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EdeMv.png" alt="enter image description here"></a></p>