Adding ken burns effect to a header image

[Tychodewaard]

Adding a ken burns effect to an image is pretty simple if you apply some css like on https://codepen.io/SaijoGeorge/pen/LxeGgY
But if you have a header with background image and it is nested in another section, it gets more complicated.

If you apply the ken burns effect to the desired Id and Id img, the css also applies to other stuff like the logo.

The most user friendly option would be to add something in the options section. Like 'effects'. That way it would be extensible.

Or, if it can be done in another way, I would like to know how :-)

[meetmandeep]

Perhaps it would be easier in future if you could just create a class and add it to Custom CSS. The ability to add a custom class to a block/element is already on the roadmap.

[Tychodewaard]

That would indeed be the desired solution. can't wait!

[Tychodewaard]

Applying kenburns to a regular image is simple. But how does this work for section background images?

I have a section with a background image which looks like
#i07b5n {
background-attachment: scroll;
background-size: cover;
background-image: url(/Portals/0/AboutUsImages/headerhome2048.png);
background-color: transparent;
padding-top: 0px;
padding-bottom: 0px;
overflow-x: visible;
overflow-y: visible;
background-position-x: 50%;
background-position-y: 50%;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
overflow: visible;
background-position: center center;
background-repeat: no-repeat;

If I add a class kenburns to the section and to the css:
.kenburns {
width: 100%;
/* height: 50vw;*/
margin: 0 auto;
overflow: hidden;
position: relative;
}

.kenburns img {
width: 100%;
animation: move 40s ease;
/* Add infinite to loop. */

-ms-animation: move 40s ease;
-webkit-animation: move 40s ease;
-0-animation: move 40s ease;
-moz-animation: move 40s ease;
position: absolute;
}

@-webkit-keyframes move {
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */

-webkit-transform: scale(1.0);
/* Safari and Chrome */

-o-transform: scale(1.0);
/* Opera */

-moz-transform: scale(1.0);
/* Firefox */

}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
/* IE 9 */

-webkit-transform: scale(1.2);
/* Safari and Chrome */

-o-transform: scale(1.2);
/* Opera */

-moz-transform: scale(1.2);
/* Firefox */

}
}

nothing is happening.