Mouseover Effect on Grid & Masonry Grid

BM Content builder supplies many mouseover effects for Grid or Masonry Grid.

To builder the effect, please create a Grid or Masonry Grid module by BM content builder. Click the guide to learn how to build a Grid or Masonry Grid.

Item Type

The mouseover options are based on the Item Type, there 2 kinds of Item Type: Image(with mask) and Image + Text

Grid Item Style

The Image(with Mask) is that the item text info(title, category, etc) is shown above the image, and the Image+Text is that the text info is displayed under the image. like the below screenshots.

Grid item style

Mouseover Effect Options

Image(with Mask)

The mouseover-effect options is available when the Item style is set with “Image(with mask)” :

Static Color Mask + Text

the mask with Text(check section Text) will be shown above the image, as shown in the following figure(left). (demo)

You can define the mask static color value, mask transparent and text style, or which type(s) of text info is displayed.

If you want to set the boxed style like the above video, please select “Transparent border” from Mask Style selector.

The 2 options (Second Featured Image and Second Featured Image + Text) will display the 2nd featured image of a single Portfolio(or Post) on mouseover.(demo) The 2 options are NOT available for the source of Media Library.

Enlarge Image

There will be animated effects of enlarged image like the below video.

Fullscreen Floating Title

The option is available from BM Content builder v 3.14.2

The item(Portfolio, Post, etc) title will display on above whole area of content, and it will be fixed like the below video. check fullscreen floating title mouseover effect demo.

No effect

There is no effect if the No Effect option is selected.

Image + Text

The mouseover-effect options is available when the Item style is set with “Image + Text” and the source is set with Post (or Portfolio / WooCommerce ):

There are 3 options that are almost the same as above: No Effect, Enlarge Image, Second Featured Image

Title to Excerpt

There are 2 options(Title to Excerpt & Second Featured Image + Title to Excerpt) on Masonry Grid module. The Excerpt of the item will display and Title will hide when mouse cursor is moved above the item. It is available the Source is set with Portfolio (or Post). The single Portfolio(or Post) should be set with an Excerpt. (check demo with Title to Excerpt effect).

The “Title to Excerpt” layout will show 2 lines of text by default, if there is no enough text, there will be more blank space below text. It is possible to show 1 line of text(remove the blank space) by custom CSS(“Appearance > Customize: Additional CSS”)

.title-to-excerpt .grid-item-con-text-show .grid-item-tit { height: calc(var(--fontsize-mgrid-tit) * var(--lineheight-mgrid-tit, 1.5)); }
.title-to-excerpt .grid-item-con-text-show .grid-item-tit, .title-to-excerpt .grid-item-con-text-show .grid-item-des {-webkit-line-clamp: 1;}
.grid-stack>.grid-stack-item>.grid-stack-item-content{ bottom:0!important; }

To make the Title to Excerpt effect works smoothly, please only keep Title and Excerpt types of Text, click cross icon to hide other types of text.

Click pencil icon to edit Title and Excerpt text, make sure all font options(font, font-size, line-height, top spacing) are the same.

Was this article helpful?

Related Articles