If you are looking to change certain elements from the hover effects and they are not available in the plugin, you can do it with custom CSS. Here are a few examples of custom changes using CSS.
How to add padding to image captions on hover
To add padding to the captions you need to add this code in Appearance > Customize > Additional CSS:
.modula .modula-items .figc p.description { padding: 25px; }Replace the value ’25px’ with the value you want – increase the value for more padding or decrease it for less padding.
How to change the letter-spacing of the caption in the gallery
If you are not happy with the letter-spacing of the caption displayed on hover, you can change it by adding the following code in Appearance > Customize > Additional CSS:
.modula .modula-items .figc p.description { letter-spacing: 0px !important; }Replace the value ‘0’ with the size you want.
How to center the text displayed on each thumbnail (title and caption)
To center the caption & title add this following code in Appearance > Customize > Additional CSS:
.modula .modula-item .figc p { text-align: center; }How to add a background to image captions on hover
If you are looking to add a background box around the caption so that people can read the text better please use the following code:
.modula-gallery .modula-item { background: #0c713c !important; }
.modula-gallery .jtg-title { background-color: rgba(0,0,0,0.5); }How to darken the image before hover
If you want to darken the picture before hovering on it, add this code in Appearance > Customize > Additional CSS:
.modula .modula-items .modula-item img.pic { opacity: 0.3 !important; }How to remove the dark background when using the effect ‘None’
The hover effect ‘None’ still has a small effect, it will darken the image even you hover over it. If you want to remove that, add this code in Appearance > Customize > Additional CSS:
.modula .modula-item:hover img { opacity: 1 !important; }Align the text left when using the hover effect Under Image
You can align the text left using this code:
html body .modula-gallery .modula-items .figc h2, html body .modula-gallery .modula-items .figc p { text-align: left; }If you are looking to change the line height of the title displayed on hover, you can use the following code:
.modula .modula-items .figc .jtg-title { line-height: 15px; }How to make the text’s font weight bolder:
html body .modula .modula-items .modula-item .jtg-title { font-weight: bold; }