CSS hover animation code inside
- is it possible?

Question

Okay, so I'm trying to do some nice fade out hover animations. Thing is - I have to put all the code inside the div tag (as I don't have access to the css files). I want to use this code for my animation, but I don't know how to modify it so it could work inside div style="..."

img {
    opacity: 1.0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 0.5;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}

If you don't have access over html and css then where are you going to write the code? — Bhojendra Rauniyar, Jun 24 '15 at 17:56

score 0 · Answer 1 · answered Jun 24 '15 at 18:00

I suppose you mean you don't have access to css but html as per your question title. So, if you want to use in html without css, then you can use onmouseover inline javascript like below:

<img src="path.jpg" onmouseover="this.style.opacity=.5;this.style.transition = \"opacity .55s ease-in-out\"" />

For prefixes you can do like mozTransition, webkitTransition.

CSS hover animation code inside - is it possible?

1 Answers1

CSS hover animation code inside
- is it possible?