CSS code for animation

[jesusvive053]

Hi, I’m making a leader page, in which we display our leaders, and I’m using the creative column 5 of design cloud, one the mouse touches the image it makes an animation, which I love, but I’d like to know how can I trigger that animation when the mouse goes over the name of the person

for example, this is how looks without animation

and this is how it looks with an animation once the mouse goes over the image

as you can see the blue square moved a little, what I want is to trigger the exact same animation, but that it happens when the mouse goes over the photo and when the mouse goes over the name, in both occasions I want to activate the animation, thank you

[jesusvive053]

one more thing, also I’d like to know different codes for different figures, instead of a block, what kind of figures can I add?

[jesusvive053]

another thing, how can I edit the CSS code in order to make different animation for different screen sizes
this is the code for the second column
$el::before {
content: ‘’;
width: 75%;
height: 90%;

display: block;

position: absolute;
top: -70px;
left: 0;

background-color: transparent;
border: 18px solid #1a3375;

transition: all 0.8s ease-in-out;
}

$el::after {
content: ‘’;
width: 71.55%;
height: 90%;

display: block;

position: absolute;
bottom: 30px;
right: 20px;

background-color: transparent;
border: 18px solid #1a3375;

transition: all 0.8s ease-in-out;
}

$el:hover::before {
top: -20.2px;
left: 58px;
}

$el:hover::after {
bottom: -30px;
right: 40px;
}

I’d like to have different values for different screen sizes, how could i do so?

[ruenel]

Hello Juan,

Thanks for writing in!

1.) "As you can see the blue square moved a little, what I want is to trigger the exact same animation, but that it happens when the mouse goes over the photo and when the mouse goes over the name, in both occasions I want to activate the animation"
Regretfully what you have in mind will require custom JS coding that would trigger the animation as you hover over the name since they are not on the same column container. You can trigger the animation as you hover over the Row container instead. You can do this by enabling the “Link Child Interactions” in your Row element settings.

2.) Be advised that the Creative Columns 5 template is part of the Creative Columns video tutorial series that you can watch in our Youtube Channel:

3.) You can go to the Layout (or Outline) tab first:

Collapse the element structure:

Hover over the element that has a number on it. That is the element that has a custom inline element CSS:

Inspect the element by clicking the magnifying glass icon and go to the “Customize” tab option:

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[jesusvive053]

thank you!!!

[ruenel]

You are most welcome.