Having trouble with flickering in rotating card animation in Bootstrap using CSS?

Recently, I worked on a bootstrap website where I implemented a unique feature – a card that flips to show its backside upon hover. You can check out the live website here: Live Site

Here's the code snippet for the section with the flipping card:

.niru {
  max-width: 2400px;
  width: 100%;
  margin: 0 auto;
}

.card-container {
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  width: 100%;
  height: 380px;
}

.flip:hover {
  transform: rotateY(180deg);
}

.card {
  position: relative;
  transform-style: preserve-3d;
  max-width: 390px;
  width: 100%;
  height: 380px;
  transition: all 0.8s ease;
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 380px;
  background: white;
  /* backface-visibility: hidden; */
  transform-style: preserve-3d;
  -webkit-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  z-index: 2;
}

.front {
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(-180deg);
}

.card-footer {
  margin: 0 auto;
}

.card-img-top {
  width: 100%
}

.card-body {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.card-title {
  color: black
}

.card-text {
  font-weight: 800;
  font-size: 17px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="niru" style="background:black;">
  <div class="container">
    <div class="section-title">

      <h2 class="title" style="color:white;padding-top:2%">
        THE BEST FOLIO
      </h2>
    </div>
    <div class="row">
      <!-- Card 1 -->
      <div class="col-md-4 col-sm-6">
        <div class="card-container" style="height:210px">
          <div class="card flip " style="height:210px">
            <!-- Front -->
            <div class="front" style="height:210px">
              <div class="card-body">
                <p class="card-title">21-12-2021 / <a style="color:#fe3e6b">CREATIVE</a></p>
                <h3 class="card-text">Small project description goes here</h3>
              </div>
            </div>
            <!-- Back -->
            <div class="back" style="height:210px">
              <div class="card-body">
                <img class="card-img-top" src="https://picsum.photos/390/210?random=1">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</section>

While testing the card flip feature, I noticed that the card is flickering a lot on hover. Sometimes it's not even displaying its backside properly, just flickering inconsistently. Can anyone please offer insight into what might be causing this issue?

htmlcssanimationbootstrap-4

Answer №1

Applied hover effect to card-container

.card-container:hover .flip{
  transform: rotateY(180deg);
}


.niru {
  max-width: 2400px;
  width: 100%;
  margin: 0 auto;
}

.card-container {
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  width: 100%;
  height: 380px;
}

.card-container:hover .flip{
  transform: rotateY(180deg);
}

.card {
  position: relative;
  transform-style: preserve-3d;
  max-width: 390px;
  width: 100%;
  height: 380px;
  transition: all 0.8s ease;
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 380px;
  background: white;
  /* backface-visibility: hidden; */
  transform-style: preserve-3d;
  -webkit-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  z-index: 2;
}

.front {
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(-180deg);
}

.card-footer {
  margin: 0 auto;
}

.card-img-top {
  width: 100%
}

.card-body {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.card-title {
  color: black
}

.card-text {
  font-weight: 800;
  font-size: 17px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="niru" style="background:black;">
  <div class="container">
    <div class="section-title">

      <h2 class="title" style="color:white;padding-top:2%">
        THE BEST FOLIO
      </h2>
    </div>
    <div class="row">
      <!-- Card 1 -->
      <div class="col-md-4 col-sm-6">
        <div class="card-container" style="height:210px">
          <div class="card flip " style="height:210px">
            <!-- Front -->
            <div class="front" style="height:210px">
              <div class="card-body">
                <p class="card-title">21-12-2021 / <a style="color:#fe3e6b">CREATIVE</a></p>
                <h3 class="card-text">Small project description goes here</h3>
              </div>
            </div>
            <!-- Back -->
            <div class="back" style="height:210px">
              <div class="card-body">
                <img class="card-img-top" src="https://picsum.photos/390/210?random=1">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</section>

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 function $.ajax may not be available, but rest assured that the jquery library is functioning properly

Upon checking the console, I noticed the following: Here is the AJAX code snippet in use: $("#accept").click(function(){ id = $("#idInput").val(); password = $("#passwordInput").val(); alert(id) alert(password) $.aja ...

jqueryhtmlajax

The button in Bootstrap 4 that triggers the modal stays in a highlighted or clicked state even after the modal has been

I am currently utilizing the button below to trigger the opening of a modal window However, upon closing the modal, it seems to maintain a highlighted or clicked appearance with a shadow effect. Initially, I assumed I could address this issue by implement ...

jqueryhtmlcssbootstrap-4bootstrap-modal

How can I customize the appearance of tab buttons in a QtabWidget using PySide?

Looking for a way to customize the tab buttons on a QtabWidget in PySide. I've managed to style other elements of my custom widget, but can't figure out how to style the QtabWidget tabs. My attempt: self.tabWidget = QtGui.QtabWidget(Form) self. ...

pythoncssqtstylespyside

Tips for combining text and variable outcomes in printing

I created a calculator that is functioning correctly and displaying results. However, I would like to include a text along with the results. For example: You spent "variable result" dollars in the transaction. Currently, the results are shown only after ...

javascripthtml

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

I am currently facing the challenge of managing multiple pages within a single document and I would like to utilize jQM 1.3's Panel widget to control navigation between these pages. However, the issue arises from the requirement that Panels must be co ...

javascriptjqueryhtmljquery-mobilenavigation

Sophisticated Arrangement of Div Elements

Here's a scenario where Two divs are dynamically styled from the Database. I am attempting to align two divs in the layout shown here: https://i.stack.imgur.com/nYI7v.png Can this be achieved using Bootstrap's CSS class col-? In responsive mo ...

htmltwitter-bootstrapcssresponsive

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

Troubleshooting Problem with Centering Rows in Bootstrap

I am utilizing the most recent version of Bootstrap 3 to design a website for a friend, but I am encountering a challenge with centering elements on the page. Typically, I would use the following code: .center{ width: 90%; margin: 0 auto; } Howev ...

jqueryhtmlcsstwitter-bootstrap-3spacing

Hiding content with a fixed Bootstrap menu

How can I prevent the fixed menu in my web page from hiding content, especially when the screen size is reduced and responsive menu hides even more content? Here's an example of the code: <nav class="navbar navbar-inverse navbar-fixed-top" styl ...

javascriptphphtmlcsstwitter-bootstrap-3

Employing jQuery, how can one assign attributes to appended HTML and store them

So, I am currently working on a backend page for managing a blog. This page allows users to create, edit, and delete articles. When the user clicks the "edit" button for a specific article named 'foo', the following actions are performed: The ...

javascriptjqueryhtml

Angular's Conditional ng-if Error

Encountering an error link from Angular Js [1]http://errors.angularjs.org/1.2.10/$parse/lexerr?p0=Unterminated%20quote&p1=s%2013-14%20%5B'%5D&p2=recipe.ID%20!%3D%3D' I am struggling to implement the solution for this error. Any help wou ...

javascripthtmlangularjsaccordionangular-ng-if

Navigate to a fresh webpage and find the scrollbar sitting at the bottom

When launching a new website using my forum system, I want the scrollbar to automatically be at the bottom so users don't have to scroll down. I'm not experienced in JavaScript and need help creating the code for this feature. ...

javascripthtmlajaxscrollbar

Using javascript code to encode images to base64 and save the output to a text file

How can I modify the code below: <p id="demo"></p> <script> var openFile = function(event) { var input = event.target; var reader = new FileReader(); reader.onload = function(){ var dataURL = read ...

javascripthtml

JavaScript Glitches

Embarking on the journey of web design and programming, I am venturing into the world of creating a simple gallery using JavaScript. Despite the convenience offered by jQuery, unfortunately, it is off-limits for this particular assignment. The challenge l ...

javascripthtml

Issue with Material-UI's DataGrid scrollbar not displaying on the screen

I have a DataGrid set up with at least 20 rows. My goal is to limit its height and allow users to navigate through the remaining rows using the scroll bar within the component. However, I'm facing an issue as the scrollbar for the DataGrid itself is n ...

cssreactjsmaterial-ui

What is the best way to delete a table that I created through my programming?

I have utilized the following code to create a table: <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <tr> ...

htmlhtml-table

Organizing an HTML layout

Looking for a way to sort a div structure based on a parameter, I came across a small JavaScript that seems to not work as expected. It appears that the sorting function is not parsing the values perfectly... This is the logic I am using for sorting: < ...

javascripthtmlsorting

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

javascripthtmlcss

Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text. <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-sm-2"> <div c ...

htmlcsstwitter-bootstrapbootstrap-4

Designing a straightforward thumbs-up icon

Hey there! I'm currently working on a blog application and trying to set up a simple like button for each post identified by its primary key (pk). However, I encountered an error along the way. The error message I received is "NoReverseMatch at /sing ...

pythonhtmldjangoerror-handling