Flip cards - on flip the card drops 50px

[INcroatia]

Hi X,

We are using the flipcards on this page (currently under construction) http://agencyh.com/about-us/our-team/. Both images and graphics are the same square size. However when you hover the second graphic drops down (image below). This looks odd and it also overlaps with the name. I’ve never experienced this with a card before. Did I somehow mess up the settings?

Thanks!

[paul.r]

Hi,

The card element has a front and back title, those are the ones that is causing the unwanted space.

The text wasn’t visible because the text color was set to transparent.

To remove the the title and content of card element, you can add the code below in Theme Options > CSS

.my-team .x-card-outer .x-face-title {
   display:none;
}

.my-team .x-card-outer .x-face-text,
.my-team .x-card-outer .x-face-text img {
    margin: 0 !important;
}

.my-team .x-card-outer {
    margin: 0 auto;
}


.my-team  .x-card-outer .x-face-graphic {
    margin: 0;
}

Hope that helps.

[INcroatia]

Hmmm, yes, I missed that. Thanks for pointing it out! It doesn’t seem like this will work then.

Hopefully it’s okay if I continue with this thread. Originally, I was simply hoping to have an image change into another image on hover.

Following this thread, it looks straight forward, but the first image never appears.

Create hover image button

There’s some addition CSS on the page and it seems to create a conflict. That said, when it’s removed, the first image still doesn’t appear.

It doesn’t have to be a button - any “change image on hover” will work, we’re just trying to spice up the Team page.

THANKS!

[INcroatia]

I sorted it out!

[nabeel]

Glad you’ve sorted it out.

Cheers!