Hover effects custom CSS changes

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.

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; }
Was this article helpful?

Related Articles