Animate an Element or Image

I Need Help
1

Hi …
Short question. When I want to animate an element or image - what is the correct way to do it.
For example an Image. I give the image a class ( fancy-image)

The I use the additional CSS option in the code editor and taget the class with:
.fancy-image

and use my code …

But I also need .fancy-image:before and .fany-image:hover:before and so on …
I do this also in the CSS option.

But is it important to set these class to the element too? Or in the class manager ? Or is the fancy-image class enough ?

cheers
Tom

2

Are you talking about the Pseudo elements here eg ::before? Then, no, because they are “attached” to the class eg. .fancy-image

To make it fun…. pseudo elements are not part of the DOM, they are virtual elements, used to style a DOM object. Or something like that anyway. :rofl:

So to put it simple… with Pseudo elements, you just write the CSS. Either by hand or using the class manager.

3

Hi Pete …

ok. So when I use additional CSS and dont use the class. But without additional CSS I set the class in the class manager and style it this way. Understood. That Code use a class called fancy-image:before …

why there is only one “:” and not like u wrote “::” …

4

I thought pseudo elements are fancy-image::before

5

Pseudo Element uses ::

eg. ::before, ::after

Pseudo Class uses :

eg :hover, :focus-within

Most browsers will resolve it, if you only use one : but its suppose to be :: and : respectively

Reference:

6

By the way, there was a thread the other week about this, I did more details descriptions.

7

thank u …
but I dont understand why it dont work …
I will use this code

And copy it in the additional css section … and give my link the same class (fancy-img)

8

You are missing a . before all the classes.

eg .fancy-img not fancy-img

I would also properly make use of the : and :: for readability

9

sorry … inside blocs I use the . to target the class …but it don’t work

But I learned a few minutes ago that this example use pseudo classes …also not important to set the class to the element ? automatically attached to the fancy-img class ?

The code works inside Sublime text … but inside blocs I dont get it to work

When I use the “a” instead of my own class all the links change - then it works

10

So its a link?

.fancy-img suggest an image, but I guess you just are copy pasting from the internet. :rofl:

Look at the mark up, you will see its

.fancy-img a {
}

If you are applying it to the link.

11

yeah … it is from the internet. So when I use it on a link I have to set the “a” also … What about when I use it on a button ?

12

That depends on how the button is marked up.

Blocs only ever used anchor tags for buttons, depending on use, though we should use < button> tags lol.

Look at the markup in the inspector, it’s all there.

13

ok Pete … thanks a lot. I must use more the inspector. Sometime it confusing me - so a lot of informations :grinning:

14

Hey don’t let on to your clients :rofl:

I would rename that class though, it’s not a good name for what you are doing.

15

Ho, wait! I got the trademark™ here on using the word ‘fancy’. Be careful, my lawyers are sharks. :rofl::shark:

16

Pretty sure I used fancy before you. so…. waiting for my royalties :rofl:

17

:grinning: its not for a client. just want to try and learn something new :slight_smile:

18

I mean generally. :rofl:

19

Oh DANG ! I am soooo sorry … :grinning:

20

Might want to edit that, no cursing.

Update: I fixed it for you. the spelling mistake wasn’t helping you