23rd Jul '22
/
0 comments

Adding Icon on Gallery Images in Bricks

When lightbox is enabled for the images in Image Gallery element, it is probably a good idea to add a visual indicator to tell the visitors that the images are clickable.

Here’s how this can be done.

Add the following in Image Gallery element’s Custom CSS:

root .bricks-layout-item::after {
	content: '';
	width: 40px;
	height: 40px;
	background: var(--bricks-color-primary) url('https://api.iconify.design/bi/zoom-in.svg') no-repeat center;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
Get access to all 633 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

Pro
Random images from ACF Options Gallery in Bricks

Random images from ACF Options Gallery in Bricks

This Pro tutorial provides the steps to output images from an ACF Gallery-type custom field in a Bricks query loop randomly with each image appearing…
Categories:
Pro
Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Custom query loop for looping through SureCart product images.
Categories:
Tags:
How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…
Pro
Limiting the Number of Images in Bricks Image Gallery Element

Limiting the Number of Images in Bricks Image Gallery Element

How we can use Bricks' render_tag() as a simpler way to limit the image count in any Gallery element.
Pro
Meta Box/ACF Images Staggered Grid Gallery in Bricks

Meta Box/ACF Images Staggered Grid Gallery in Bricks

Showing images from two Gallery-type of ACF or Image Advanced-type of Meta Box fields in a staggered grid layout.
Pro
Configuring Image Gallery dynamic source in Bricks

Configuring Image Gallery dynamic source in Bricks

Let's say you have a custom field created with ACF Pro of the type Gallery called "Property Gallery" for posts of "Property" CPT. In the…