- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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:
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?
I want a fade-in effect.
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