Implementing Flipcard on Click Instead of on Hover

implementing flipcard on click instead of on hover

To make this work you need to remove the :hover rule on the .flip-container element in your CSS:

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

Then in your JS you need to toggle the hover class when the element is clicked instead:

$('.flip-container .flipper').click(function() {
    $(this).closest('.flip-container').toggleClass('hover');
    $(this).css('transform, rotateY(180deg)');
});

Working example

Note that it may also be worth changing the class name from hover now too, otherwise it may get confusing when you come to maintain the code at a later date

Can I use flip cards on click instead of hover

Unfortunately, no. You cannot track click events with CSS. If you want click events, use JavaScript.

document.getElementsByClassName("flip-card-front")[0]
    .onclick = function(){
    this.classList.toggle("active")
    }

Please note that this form will only take effect on the first flip card. If you want more, you need some kind of loop, or even setting an onclick event to the whole screen and checking if the target matches a flip card.

Flipcard hover into onclick action

You could achieve this using :active selector in combination with :hover (as long as the :active selector is called after the :hover selector)

so try:

.stuff1:hover, .stuff1:active {
    -webkit-transition-delay: 0.25s;
    transform: rotateY(180deg);
}

But if you want to use JQuery, what you'd want to do is to change the CSS of your :hover to a class say: .active then add the JQuery to toggle this class on click something like:

$('.x').on('click', function(){
    $(this).toggleClass('active');
});

If you put your code into jsfiddle I'd happily help further, but this should get you started in the right direction.

Fiddle Demo

Flip a card on mouse click

Easier than I thought, no javascript required. Nice effect! So here I am adding/toggling a class based on click.

<div class="col-md-4 card-container" @onclick="FlipMe">
    <div class="card-flip @flipCss">
...
@code {
    bool flipped;
    void FlipMe() => flipped = !flipped;    
    string flipCss => flipped ? "im-flipped" : "";
}

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

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

Here is a working BlazorFiddle

adding a button to each card to flip

It seems you just need to add a button and add it to the selector

$('.flip-container .flipper button').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');
  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

/* flip the pane when hovered */

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

.flip-container,
.front,
.back {
  width: 250px;
  height: 250px;
}

/* flip speed */

.flipper {
  transition: 0.8s;
  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;
  transform: rotateY(0deg);
}

/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

.artist-1 {
  background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
      <button>Flip</button>

    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
      <button>Flip</button>
    </div>
    <div class="back">
      <p>You won</p>
    </div>

  </div>

</div>

CSS card flip effect - how to make it flip in the same direction with every click?

It has to be done via script (check this SO question). So by editing the example you followed, we can do it this way:

$('.flip-container').each(function(i) {
    var thisFlipper = $(this).find('.flipper');
    var rotate = 0;
    thisFlipper.on('click', function(e) {
        rotate += 180;
        thisFlipper.css({'transform': 'rotateY('+rotate+'deg)'});
    });
});

.flip-container {
    perspective: 800px;
}

.flip-container,
.front,
.back {
    width: 250px;
    height: 250px;
}

/* flip speed */
.flipper {
    transition: 0.8s;
    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;
}

/* back, initially hidden pane */

.back {
    background-color: #ff0000;
    transform: rotateY(180deg);
}

.artist-1 {
    background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
    background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
    <div class="flipper">
        <div class="front artist-1">
            
        </div>
        <div class="back">
            <p>You won</p>
        </div>
    </div>
</div>

Reset old card flip when flipping a new card

Set .toggleClass() (or .removeClass()) to .hover element.

$('.flip-container .flipper').on('click',function() {
    // flip back previous hovered element
    if ($('.flip-container.hover').length === 1) {
        // is previous flipped the same as current one?
        var same = $(this).parent().hasClass('hover');

        $('.flip-container.hover').toggleClass('hover');

        var el = $(this);
    
        // flip current element if not the previous one
        if (!same) {
            setTimeout(function() {
                el.closest('.flip-container').toggleClass('hover');
            }, 800);
        }
    } else {
        $(this).closest('.flip-container').toggleClass('hover');
    }
});

/* flip the pane when hovered */

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

.flip-container,
.front,
.back {
    width: 250px;
    height: 250px;
}

/* flip speed */

.flipper {
    transition: 0.8s;
    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;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */

.back {
    transform: rotateY(180deg);
    background-color: #fff;
}

.artist-1 {
    background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
    background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
    <div class="flipper">
        <div class="front artist-1">
            <!-- front content -->
        </div>
        <div class="back">
            <p>You won</p>
        </div>
    </div>
</div>

<div class="flip-container">
    <div class="flipper">
        <div class="front artist-1">
            <!-- front content -->
        </div>
        <div class="back">
            <p>You won</p>
        </div>
    </div>
</div>

Make my flip on hover query script script work on mobile

hover() accepts a second (optional) parameter that gets run when you hover out

$('.card').hover(function() {
    $(this).toggleClass('flipped');
  },
  function() {
    $(this).toggleClass('flipped');
});

But on mobile devices hover() isn't a actual jquery mobile event it uses touch events internally so if it didn't work you might need to use touchstart and touchend events and bind on them

EDIT : touchstart is similar to click and touchend is similar to mouseup event on mobile .If you include jquery mobile you can do this

Snip 1

$(".card").on('touchstart',function() {
     $(this).toggleClass('flipped');
});

This would be like a "toggle button" when you touch and release it would keep its state untill you do it again.Whereas this

Snip 2

$(".card").on('touchstart',function() {
     $(this).toggleClass('flipped');
});

$(".card").on('touchend',function() {
     $(this).toggleClass('flipped');
});

would behave like a "turbo button" the moment you release your touch it would revert back to its original state

Flip card won't flip back on mobile device

Flipping back when releasing the finger

When you click on the screen of a touch device you must imagine that your theoretical mouse cursor (that is not visible) has moved to the position of your finger and when you release your finger it will remain at this position until you click somewhere else.
I can think about two solutions:

1. you leave it as it is now, so you have to click away to turn it back
2. or you turn it back right after the user releases his finger (you need to remain your finger on the screen as long as you want it to be flipped)

You already have the first solution, so here is the second (this solution on fiddle):

let touch_div = document.getElementById('touch_div');
let is_touch_device = false;
let touchstart_event_listener;  // save the event listeners, if you want to delete them later
let touchend_event_listener;    // save the event listeners, if you want to delete them later

if ("ontouchstart" in document.documentElement) {   // check if touch is enabled on device
  is_touch_device = true;
}

if (is_touch_device) {
  touch_div.classList.add('touch-device');  // adds a class to style the div for touch devices
  
  touch_div.addEventListener('touchstart', touchstart_event_listener = () => {  // event listener changes the class to hovered when you put your finger on the div
    touch_div.classList.replace('touch-device', 'touch-device-hovered');
  });
  
  touch_div.addEventListener('touchend', touchend_event_listener = () => {    // event listener changes the class back to not hovered when you release your finger
    touch_div.classList.replace('touch-device-hovered', 'touch-device');
  });
} else {
  touch_div.classList.add('mouse-device');  // adds a class to style the div for mouse devices
}

.mouse-device {
  width: 100px;
  height: 100px;
  background-color: purple;
}
.mouse-device:hover {
  background-color: green;
}
.touch-device {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
}
.touch-device-hovered {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: blue;
}
.margin-top {
  margin-top: 10px;
}

<div class="mouse-device"></div>                  <!-- this will always be a div that changes style on hover -->
<div id="touch_div" class="margin-top"></div>     <!-- this will be identical to the first div when you're not on a touch device, but it will change to touch sensitive when you are on a touch device -->

---

Related Topics