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
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.
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.
Second Featured Image
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.
