Bootstrap Card Reveal on Hover

User 244626 Photo


Registered User
811 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:
Bootstrap 5 CSS Grid.

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.