CODEWITHSUNDEEP
javascripthtmlimagecss
hypermails
hypermails

Reputation: 746

how to create a single image flip effect t in a group of images?

I have 4 sections - each with a single image and some text.

<div class=container>
 <div class=row>
  <div class="1"> img 1 </div>
  <div class="1"> img 2 </div>
 </div>
 <div class=row>
  <div class="1"> img 3 </div>
  <div class="1"> img 4 </div>
</div>

I am trying to have the image flip effect - and there are a lot out there.

when I hover or touch (mobile) - I would like the image to flip and show some text.

what I am trying to do is allow the system to only allow one image remain flipped with some text.

I would like to start (when page is loaded) only image 1 is flipped with text - and the other 4 are images. when some one hovers/touch the other images, img 1 reset - and the other one shows the text.

any module that can help me ? I am already using jquery latest and pure/skeleton like for responsive images.

edit1:

by flip effect - I mean

http://codepen.io/ilanf/pen/gjoKl

thanks

Upvotes: 1

Views: 854

Answers (1)

Angel Politis
Angel Politis

Reputation: 11313

First of all "Nice work!". I like your effect.

To answer your question:

  1. To have one of your images flipped when the page loads, you have to separate it from the rest and use the backface as the default state. By "separate", I mean, use a different class name, id or name.

  2. Now, according to the codepen fiddle you gave us, it is impossible for more than images to be flipped simultaneously since the image flips back to its default state when the mouseout event is triggered.

  3. To flip the image that has the text being visible on default when another image is hovered, use this jQuery script:

/* Let's suppose you give the image you want originally flipped an
extra class = "default-flipped" */

$(".1").on("mouseover", function() {
    if ($(this).siblings().hasClass("default-flipped")) {
        $("default-flipped").css("transform", rotateY(180deg);
    }
});

EDIT:

As I promised, here is a working version of what you asked for; or basically what I understood you asked for.

Since you already have found that working fiddle which like and want to replicate, I think trying to reinvent the wheel would be utterly pointless.

→ There are a few things you have to add, though, to the CSS though and of course some jQuery:


CSS:

/* We create a pre-flipped class for the element you want already flipped 
when the page loads. */
.pre-flipped {
    transform: rotateY(180deg);
    /* That's what the card are supposed to do on hover
    Our already flipped card must already have this rule
    in order to be flipped from the start. */
}

/* If you want the images to be inline change the display
from block to inline-block as shown: */
.flip-images .card-wrapper {
    display: inline-block;
}

In the CSS of your fiddle there is a block of code as shown below which is used to flip the cards on hover:

.flip-images .card-wrapper:hover .card {
    transform: rotateY(180deg);
} /* I removed it and as it makes things complicated
  when trying to create the hover effect from jQuery. */

That's it from the CSS standpoint.


jQuery:

$(document).ready(function() {
    // mouseover event
    $(".card-wrapper").on("mouseover", function() {
        // Always leaves one open
        $(this).children().css("transform", "rotateY(180deg)");
        $(this).siblings().children().css("transform", "rotateY(0deg)");
    });
});

Check this codepen to see how it works! 😊

Upvotes: 2

Related Questions