Each of these (columns) use CSS transitions and transfoms on hover. With Elementor, there’s no need to create a class in your style.css file.
Simply select the column, and enter your CSS in the custom CSS tab using “selector”.
This works with any element, not just columns. And, of course, they can be combined.
https://docs.elementor.com/article/516-how-to-use-selector-in-the-custom-css-tab
Width
Background
selector {
transition: width 1s;
}
selector:hover {
width:500px;
}
selector {
background: #75a2c3
}
selector:hover {
background: #91af8e;
}
Opacity
Transform: rotate
selector {
opacity:1;
transition: opacity 1s;
}
selector:hover {
opacity: .5;
}
selector {
transition: transform 2s
}
selector:hover {
transform: rotate(180deg);
}
Translate
SkewX
selector:hover {
transform: translate(50px);
}
selector {
background:#75a2c3;
}
selector:hover {
transform: skewX(-10deg);
}
Border Radius
Box Shadow & Background Color
selector {
background: #75a2c3;
}
selector:hover {
border-radius:50%;
}
selector {
background:#75a2c3;
}
selector:hover {
background: #fff;
box-shadow: 0 0 10px 0 #aaa;
}
Height
Border Radius, Background, Skew
selector {
transition: height 2s;
}
selector:hover {
height:300px;
}
selector {
background: #75a2c3;
}
selector:hover {
background: #91af8e;
border-radius: 25px;
transform: skewX(20deg);
}
