Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Image Rollover

1 week 1 day ago #1

  • Dave's Avatar
  • Dave
  • Posts: 567
Hello, how can I have a single image change to another image when you mouse over it? With a slight transition time. Like this page sofosmarketresearch.com/who-we-are

Thank you

1 week 23 hours ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
Hello,
Thank you for contacting us

Unfortunately, there is no such option.
This can only be done using custom code

Regards,
Vyacheslav, Balbooa.com

1 week 15 hours ago #3

  • Dave's Avatar
  • Dave
  • Posts: 567
This seems like a pretty standard thing for a builder to include. Can you offer a solution? Perhaps adding it to the image app as an amination. Custom code is fine if you can help, please.

Thank you

6 days 22 hours ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
Hello,

To do this, you can use the flipbox plugin and add css code in the code editor
.ba-item-flipbox .ba-flipbox-frontside,
.ba-item-flipbox .ba-flipbox-backside {
    transform: none !important;
}

.ba-item-flipbox .ba-flipbox-wrapper .ba-flipbox-frontside {
	transition: .3s !important;
}

.ba-item-flipbox .ba-flipbox-wrapper:hover .ba-flipbox-frontside {
	opacity: 0 !important;
}

Best Regards,
Vyacheslav, Balbooa Support Team

6 days 16 hours ago #5

  • Dave's Avatar
  • Dave
  • Posts: 567
Very nice! Thank you for this help. I really appreciate your help.

How can I apply this to specific flipboxes in case I want to use another one like the default behavior?

6 days 16 hours ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
You need to add a class for the plugin and add it to your code

Best Regards,
Vyacheslav, Balbooa Support Team

6 days 15 hours ago #7

  • Dave's Avatar
  • Dave
  • Posts: 567
I added this to code and suffix flipfade to plugin but now it's flipping.
.flipfade .ba-item-flipbox .ba-flipbox-frontside,
.flipfade .ba-item-flipbox .ba-flipbox-backside {
    transform: none !important;
}

.flipfade .ba-item-flipbox .ba-flipbox-wrapper .ba-flipbox-frontside {
	transition: .9s !important;
}

.flipfade .ba-item-flipbox .ba-flipbox-wrapper:hover .ba-flipbox-frontside {
	opacity: 0 !important;
}

Sorry, I am not good with CSS

5 days 23 hours ago #8

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
You need to remove spaces between .flipfade .ba-item-flipbox

You need use thes code :
.flipfade.ba-item-flipbox .ba-flipbox-frontside,
.flipfade.ba-item-flipbox .ba-flipbox-backside {
    transform: none !important;
}

.flipfade.ba-item-flipbox .ba-flipbox-wrapper .ba-flipbox-frontside {
    transition: .9s !important;
}

.flipfade.ba-item-flipbox .ba-flipbox-wrapper:hover .ba-flipbox-frontside {
    opacity: 0 !important;
}

Best Regards,
Vyacheslav, Balbooa Support Team

5 days 16 hours ago #9

  • Dave's Avatar
  • Dave
  • Posts: 567
Excellent, thank you

5 days 16 hours ago #10

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
You are welcome ;)
Powered by Kunena Forum