[Solved] CSS/Jquery FadeIn/Out Help!

[smarty.rockz]

Hey,
I am building a website, I am trying to achieve a transition ease-in-out effect on an image on hover using css. The effect appears on Chrome but does not appear on Mozilla v32.

It has a background-image which changes on hover to the same image but with added borders, this does not work with mozilla/internet explorer.

Can I achieve this using jquery? Or any solution with css, I want this to work on most browsers including mobile platforms

[__]

You’ll need to show us some code. codepen is a good tool for that.

transition has very wide browser support, except for IE < 10. You shouldn’t be having any problems with Firefox.

[smarty.rockz]

my code:
html5:
<div id="home-text"></div>

Css:

#home-text {
    margin: 0 auto;
    background: url(images/home-text6.png) no-repeat;
    background-size: contain;
    height: 150px;
    width: 700px;
    transition: background 0.7s ease-in-out;
    -webkit-transition:background 0.7s ease-in-out;
    -o-transtion:background 0.7s ease-in-out;
    -moz-transition:background 0.7s ease-in-out;
}

#home-text:hover{
    height: 150px;
    width: 700px;
    background: url(images/home-text6-hover1.png) no-repeat;
    cursor: pointer;
    background-size: contain;
    margin: 0 auto;
}

[__]

You can’t transition between background images. You could have both images in the first place, make one of them transparent, and then transition the opacity on hover:

http://codepen.io/adrian-enspired/pen/eAiDk

[smarty.rockz]

It is working, but it isn’t as good as it was when i changed the background-image on hover, is there a way to do that using jquery?

[smarty.rockz]

I want a fade-in effect.

[smarty.rockz]

Thanks @_, your method worked, I just had to inter-change the opacity value of #home-text:after and #home-text:hover:after.

Thank you guys!

[__]

you’re welcome

[Author]

Posts