hover on CSS

Hi,


I want to have a hover effect on an image as well as a style with another class. 

I have put this:


@media (max-width: 800px) {

      .MoviePoster {background-color: black;Padding: 5px;border: 1px solid # 185f8d;

border-radius: 200px;width: 100%;  }  


.MoviePoster: hover { 

 -webkit-transform: rotate (360deg); transform: rotate (360deg);  

}


The first style works perfectly, the hover does nothing.

Is the css incorrect? 

How should I assign the styles in the graphic editor?



Thank you so much for your work.

Greetings,

Miguel.

Hi Miguel,

If there's actually a space after the colon, it sure won't work :). Make sure it says ".MoviePoster:hover", without the space.

Hi Miguel,

Looks like you have missed closing curly bracket.


Sravan,

Though his layout sucks, the closing brace is just at the line below.  The @media doesn't have one, but I'm sure it's somewhere out of sight. The problem is in the extra space,  like I said. 

Sorry, when it was pasted the format has been changed.


I have the hover without space, as you can see.


From the graphic editor, am I calling it well?



Thanks for your answers, greetings.

In your copy/paste you had -webkit-transform, in the above I see it without the "-". That can't be it though, as the transform should work (there's really no need for the -webkit stuff).

And if that's really all of your CSS, the @media lacks a closing brace if it's not somewhere out of sight (as Sravan more-or-less noted already).


Excuse me again, this is my complete css. I had deleted "-" since I understood that it was wrong.

I mean right now I have it like this:




It is assumed by the indications that you give me that it is correct.

Could it be that this effect can not be seen in a small resolution? Or what is calling it incorrectly?

In "inspect" (f12) of google chrome, he does not even find it.

Anyway thank you very much. Could you confirm that I call the style correctly?

Thanks greetings and happy day.

Besides the missing brace, you do have your width in the browser less than 800px?

otherwise it will not trigger.

and regarding your hover with the dev-tools, click on the :hov

there you can mimick the events.


@J: Well, the .MoviePoster seems to trigger, per his image.

@Miguel: the "-" should really be in front of "webkit", but better to remove the line altogether. Also, of course you don't see it like that in the devtools of Chome, as this is the onhover; please click the ":hov" button to see what happens.


Yes, .MoviePoster is activated. 


With -webkit-transform this happens:

With webkit-transform this occurs another:




And if the emulator does not fail, I'm seeing it with a resolution of less than 800px.


That´s my url:

https://miguel-verdejo.outsystemscloud.com/OSMDb/MovieDetail.aspx?MovieId=8&(Not.Licensed.For.Production)=

Thank you again.


Solution

I checked the URL, and everything seems to work perfectly! Note however that 360 degrees is a full circle, so a transform of 360 degrees doesn't do anything visible ;).

Solution


Ok, I tried another hover effect. When resizing to similar sizes to a smartphone / tablet, different effects are displayed, logically, because the hover is different in mobile.


I've tried it with desktop size and it works.Thank you very much for your help. Together we make Outsystems better.A hug.Miguel.

Don't forget that "hovering" over a touch screen doesn't really exist, so you might not need to implement it for such devices. Happy coding!

Kilian Hekhuis wrote:

Don't forget that "hovering" over a touch screen doesn't really exist, so you might not need to implement it for such devices. Happy coding!

Thank you so much Kilian, you are a great profesional.


Greetings from Spain.


Trying my best :)