Bootstrap Card Reveal on Hover


Registered User
421 posts

I have been researching ways to apply a hover effect to a Bootstrap Card or just any picture groups. I have not found a way to apply hover to one element which would then link to others within Bootstrap yet, but this plugin (free) looks pretty simple. http://imagehover.io/

It relies on using the correct tags for the container divs but figure is already available and I just used section for the other. To do that I had to edit the effect.css file. I also had to edit the hover.min file to remove default blue colors so I could set my own within Bootstrap Builder. So be forewarned, there are mods to the files required to work.

This plugin does allow me to easily place a single effect on the top container, and then design away. When you are looking at the card you will be looking at the bottom layer first. I am not sure if this is a setting or something but I usually just set the position view to none and work on the top, then reset view to block again.

There is a paid version also which adds effects and delays to the inner revealed container elements. But for now....this works.:cool:

Attachments:
Break on through to the other side

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.