Select elements can be targeted to have hover effects via the site editor by using CSS classes. More information about using CSS classes can be found in this article.
The CSS classes below can be used to give a hover effect to your target content:
.hover-effect .tile-caption {
bottom: -30%;
position: absolute;
background: #fff;
padding: 50px;
transition: all 1s;
}
.hover-effect:hover .tile-caption {
bottom: 0%;
position: absolute;
background: #fff;
padding: 50px;
transition: all 1s;
}
You can definitely play around with the property values of the CSS classes above to achieve your preferred effect.
There are two ways to add a custom CSS so the site can use it:
via the site editor (check this article for more details)
via the theme editor (check this article for more details)
Once the CSS class is available for use, you can then associate it with your target content via the site editor.
In the example below, the CSS classes are added in the site editor and are applied to an image tile.