Flip animation on CSS when mouse is hovering over a button

Question

I´m trying to get a css flip animation that is based on a hover effect of the mouse pointer over a button. Now you can see something similar at this codepen In this codepen example you get a flip animation when you hover the mouse pointer over the card.

I´ve got this html code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Card Flipped</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App css -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>

    <body>

        <!-- Begin page -->
        <div class="wrapper">
                        <div class="row">
                            <div class="col-md-6 col-lg-3">

                                <!-- Simple card -->
                                  <div class="flip-container" >
                             <div class="flipper">
                             <div class="front">
                                <!-- front content -->
                                <div class="card d-block">
                                      <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP" alt="Card image cap" height="180" weight="80">
                                    <div class="card-body">
                                        <h5 class="card-title">Introduction to particle physics</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
                                        <a href="javascript: void(0);" class="btn btn-primary">Buy</a>
                                        <a href="javascript: void(0);" class="btn btn-primary view-details">View Details</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                             </div>

                                    <div class="back">
                                        <h1>Do you like it?</h2><!-- back content -->
                                    </div>
                                </div>
                            </div>

        </div>
        <!-- END wrapper -->

        <script src="assets/js/app.min.js"></script>
    </body>
</html>

And this css code:

/* FLIP DOUBLE SIDE START ANIMATION CODE */
/* entire container, keeps perspective */
/* flip the pane when hovered */

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

/*
.view-details:hover .flipper {
    transform: rotateY(180deg);
  }
*/

.flip-container, .front, .back { /*Attention*/
    width: 280px;
    height: 480px;
}


/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}
/* FLIP DOUBLE SIDE END CODE ANIMATION*/

But what I´m trying to get is that when you put the mouse pointer over the viw details button then you get the flip animation of the whole card. The view details button contains a class called "view-details". So I tried to change the css line:

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

for this other one:

.view-details:hover .flipper{   transform: rotateY(180deg);
        }

But apparently nothing happens. By the way, I get the css code and part of the html code from David Walsh web page

score 2 · Accepted Answer · answered Nov 27 '18 at 21:23

Nothing is happening because you are trying to animate a parent selector from a child using only CSS. Unfortunately there is currently no way to select the parent of an element using just CSS. You will need to use a Javascript/jQuery solution like this to achieve the effect you are looking for.

$('a.view-details').mouseover(function() {
  $(this).parents('.flipper').css('transform', 'rotateY(180deg)');
}).mouseout(function() {
 $(this).parents('.flipper').css('transform', '');
});

/* FLIP DOUBLE SIDE START ANIMATION CODE */
/* entire container, keeps perspective */

.flip-container,
.front,
.back {
 /*Attention*/
 width: 280px;
 height: 480px;
}

/* flip speed goes here */
.flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}

/* hide back of pane during swap */
.front,
.back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}

/* front pane, placed above back */
.front {
 z-index: 2;
 /* for firefox 31 */
 transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
 transform: rotateY(180deg);
}
/* FLIP DOUBLE SIDE END CODE ANIMATION*/

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8" />
 <title>Card Flipped</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
 <meta content="Coderthemes" name="author" />
 <!-- App favicon -->
 <link rel="shortcut icon" href="assets/images/favicon.ico">

 <!-- App css -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

 <!-- Begin page -->
 <div class="wrapper">
  <div class="row">
   <div class="col-md-6 col-lg-3">

    <!-- Simple card -->
    <div class="flip-container">
     <div class="flipper">
      <div class="front">
       <!-- front content -->
       <div class="card d-block">
        <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP" alt="Card image cap" height="180" weight="80">
        <div class="card-body">
         <h5 class="card-title">Introduction to particle physics</h5>
         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
         <a href="javascript: void(0);" class="btn btn-primary">Buy</a>
         <a href="javascript: void(0);" class="btn btn-primary view-details">View Details</a>
        </div>
        <!-- end card-body-->
       </div>
       <!-- end card-->
      </div>

      <div class="back">
       <h1>Do you like it?</h2>
        <!-- back content -->
      </div>
     </div>
    </div>

   </div>
   <!-- END wrapper -->

   <script src="assets/js/app.min.js"></script>
</body>

</html>

Flip animation on CSS when mouse is hovering over a button

1 Answers1

Linked