Css effects in hype

1

Trying to add css effects to images.

this works:

I have an image that is on the main screen with a class name of logo.
this works in the header.

.logo:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

however there are certain css effects that will not work on an image even with a class name.

.logo:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}

if I coded the html like this:
it works

.logo:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }
<img src="logo.png"

I know there you can’t name your divs in hype but I thought using the class name would work …

please help there are a lot of effects I could add using css to images etc.

please advise

thanks

2

You can give an element a "Unique Element ID". Then, you can add CSS to that element directly using the hashtag selector.

42%20PM
42%20PM540×724 16.4 KB

So, if the Unique Element ID name is "circle", then your CSS would looks something like...

#circle {
border: 1px solid black;
}

However, the main point of using Hype is that it animates the styling of an element. It appears you're trying to do that manually. Instead, you could use "Button Controls" to modify a "Hover" effect.

50%20PM

If you don't see the button controls, there's a "Show Button Controls" option in the menu bar.

27%20PM
27%20PM800×696 91.3 KB

Also, if you don't want to treat your element like a button, you could use a timeline to control various actions... "On Mouse Over" and "On Mouse Out" is another way to do this.

But, if for some reason none of this appeals to you, perhaps you're looking for the "!important" CSS property.

So, your code would look like this...

.logo:hover {
-webkit-transform: rotate(-10deg) !important;
-moz-transform: rotate(-10deg) !important;
-o-transform: rotate(-10deg) !important;
-ms-transform: rotate(-10deg) !important;
transform: rotate(-10deg) !important;
 }

While I didn't test it... because I don't recommend doing it this way ...I suspect the problem is that your styles are conflicting with styles created by Hype. So, if you use an "!important" property, then your styles take priority. Again, that's just an educated guess though. I didn't test it.

2 Likes
3

Thanks for the help - You guys are awesome!

1 Like