HeartAndDash
-
Posts
16 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by HeartAndDash
-
-
I am using the Bedford template and I would like to change the "caption overlay on hover" feature so that the overlay covers the whole image, the whole image is clickable, and I can customize the colors of text and the overlay itself. The default "caption overlay on hover" style is a small transparent gray bar that overlays the very bottom of the image.
I searched everywhere for a cohesive snippet of custom CSS code, and while there are several partial answers, I have yet to see something that covers all of my wish list. I'll keep tinkering and report back!
How can I change the style of my caption overlay on hover?
in Customize with code
Posted
I got it the way I want it! To see this code in action, see Heart & Dash Portfolio.
If you want this code to work, do not use an image grid. Instead, create your own 'grid' by simply inserting multiple image blocks.
You'll insert this code by going to "Design" then "Custom CSS":
The nice thing about this is that you can customize the color of the caption/type (I used #ea4e4c) that appears on hover and you can also customize the color of the background (I used #fddcce). You can customize those hex color codes for yourself.
For me, this is a total solution!