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. You need to add the following codes in your WordPress dashboard > Appearance > Customize > Additional CSS.

Add padding to image captions on hover

.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.

Change the letter spacing of the caption in the gallery

.modula .modula-items .figc p.description { letter-spacing: 0px !important; }

Replace the value ‘0’ with the size you want.

Center the text displayed on each thumbnail (title and caption)

.modula .modula-item .figc p { text-align: center; }

Add a background to image captions on hover

.modula-gallery .modula-item { background: #0c713c !important; }
.modula-gallery .jtg-title { background-color: rgba(0,0,0,0.5); }

Darken the image before hover

.modula .modula-items .modula-item img.pic { opacity: 0.3 !important; }

Remove the dark background when using the effect ‘None’

.modula .modula-item:hover img { opacity: 1 !important; }

Align the text left when using the hover effect Under Image

html body .modula-gallery .modula-items .figc h2, html body .modula-gallery .modula-items .figc p { text-align: left; }

Change the line height of the title displayed on hover

.modula .modula-items .figc .jtg-title { line-height: 15px; }

Make the text’s font weight bolder

html body .modula .modula-items .modula-item .jtg-title { font-weight: bold; }