CSS Transitions

CSS + Transitions + Transform using *Selector* Magic​

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);
}

SHARE THE LOVE

Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on linkedin
LinkedIn