Flip the cards on hover of info icon - Tweenmax

Question

Here is my fiddle : DEMO

The hover over card flips the card. How do I flip the card on hover of the "info" icon?

$(".cardWrapper").hover(
  function() {
    TweenLite.to($(this).find(".card"), 1.2, {
      rotationY: 180,
      ease: Back.easeOut
    });
  },
  function() {
    TweenLite.to($(this).find(".card"), 1.2, {
      rotationY: 0,
      ease: Back.easeOut
    });
  }
);

Answer 1

To make this work you need to change the selector to .cardWrapper .info and find() to closest().

You will also have to separate the hover in/out events, otherwise the flip back will occur immediately as the .info is no longer 'hoverable' when flipped. Something like this:

$(".cardWrapper .info").mouseenter(function() {
  TweenLite.to($(this).closest(".card"), 1.2, {
    rotationY: 180,
    ease: Back.easeOut
  });
});

$(".cardWrapper").mouseleave(function() {
  TweenLite.to($(this).find(".card"), 1.2, {
    rotationY: 0,
    ease: Back.easeOut
  });
});

TweenLite.set(".cardWrapper", {
  perspective: 800
});
TweenLite.set(".card", {
  transformStyle: "preserve-3d"
});
TweenLite.set(".back", {
  rotationY: -180
});
TweenLite.set([".back", ".front"], {
  backfaceVisibility: "hidden"
});

$(".cardWrapper .info").mouseenter(function() {
  TweenLite.to($(this).closest(".card"), 1.2, {
    rotationY: 180,
    ease: Back.easeOut
  });
});

$(".cardWrapper").mouseleave(function() {
  TweenLite.to($(this).find(".card"), 1.2, {
    rotationY: 0,
    ease: Back.easeOut
  });
});


TweenMax.staggerTo($(".card"), 1, {
  rotationY: -180,
  repeat: 1,
  yoyo: true
}, 0.1);

body {
  background-color: black;
  margin: 20px;
  font-family: Arial, sans-serif;
}

.cardWrapper {
  width: 200px;
  height: 200px;
  position: relative;
  /*background-color:#333;*/
  float: left;
  margin-right: 10px;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}

.cardFace {
  position: absolute;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.front {
  background-color: #333;
}

.back {
  background-color: #333;
}

.cardFace h1 {
  margin: 0px;
  font-size: 30px;
  padding: 10px 0px 10px 10px;
  border-bottom: solid 6px #aaa;
  border-top: solid 6px #aaa;
  background-color: black;
  color: white;
}

.cardFace.back h1 {
  border-color: #91e600;
}

.moreInfo {
  padding: 10px;
  color: white;
  line-height: 24px;
}

.info {
  font-size: 24px;
  color: #fff;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front">
      <h1>front</h1>
      <div class="info">&#9432;</div>
    </div>
    <div class="cardFace back">
      <h1>back</h1>
    </div>
  </div>
</div>

<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front">
      <h1>front</h1>
      <div class="info">&#9432;</div>
    </div>
    <div class="cardFace back">
      <h1>back</h1>
    </div>
  </div>
</div>

<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front"><img src="https://s.cdpn.io/16327/logo_texture.jpg"></div>
    <div class="cardFace back"><img src="https://s.cdpn.io/16327/logo_robust.jpg"></div>
  </div>
</div>

<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front">
      <h1>front</h1>
      <div class="info">&#9432;</div>
    </div>
    <div class="cardFace back">
      <h1>back</h1>
    </div>
  </div>
</div>

<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front">
      <h1>front</h1>
      <div class="info">&#9432;</div>
    </div>
    <div class="cardFace back">
      <div class="moreInfo">This is just an example of how you can customize the content of any card face.</div>
    </div>
  </div>
</div>