Elementor-image-widget-Filters-captions-Hover-effects-and-more

Elementor image widget : Filters captions Hover effects and more!

Learn all about Elementor image widget, how to apply CSS filters, on hover effects, caption overlays and other styles all by using Elementor and CSS.

Without installing any 3rd party add-ons you can achieve various styles using Elementor as shown in the video.

The main HTML elements are figure and figcaption that you can target using CSS directly.

Join our Facebook Group:

Custom css with Elementor free version:

CSS shown in the video- Effects 1-3:

selector

transition: transform 0.4s ease-in,filter 0.4s;

selector:hover

filter:grayscale(100%);
transform: scale(1.3) translate(10%,10%);

Codepen Effect 4 CSS:

selector figure figcaption
position: absolute;
top: 0;
left: 0;
background: #fff;
width: calc(100% – 2rem);
height: calc(100% – 2rem);
margin: 1rem;
text-align: center;
display: grid;
align-content: center;
opacity: 0;
transform: scale(.95);
transition: opacity .3s ease-in-out, transform .3s ease-in-out;
pointer-events: none;

selector figure figcaption
font-size: 21px;
color: rgba(0, 0, 0, .4);

selector figure figcaption:after
content: “By me”;
font-size: 12px;
font-style: italic;

selector figure:hover figcaption
opacity: .9;
transform: scale(1);

Codepen Source:

CSS transforms: