• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 204
  • Last Modified:

css3 transitions

When you hover over the object it will fade lighter.  But when you hover out it doesn't do a nice transition how would you do transition of hover out of the object

Here is a link to the code

http://bit.ly/1bf9q2q
0
stargateatlantis
Asked:
stargateatlantis
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I could not get it to work with jsfiddle but in jsbin http://jsbin.com/iJUpagEv/1/edit?html,css,output it seems to work.  How does it work on your own site?
0
 
Kyle HamiltonData ScientistCommented:
if all you're doing it fading in and out, then you don't need to use animations. use transitions instead.

http://jsfiddle.net/DXs3X/

.issue{
    width:200px;
    height:259px;
    background:url('http://images.kmag.co.uk/assets/images/latestfeatures/2013/11/Modu120.jpg') 100%;
    position:relative;
}

.issue > a{
    background-color:rgba(0, 0, 0, 0); 
    height:100%;
    width:100%;
    position:absolute;
    bottom:0; 
    
   -moz-transition: all 2s; 
    -ms-transition: all 2s; 
-webkit-transition: all 2s; 
        transition: all 2s;
}

.issue > a:hover{
     background-color:rgba(255, 255, 255, 1);  
     opacity: 0.5;
    
}

Open in new window

0
 
COBOLdinosaurCommented:
You just use a transition both direction:

.someclass {background-color:rgba(0, 0, 0, 0);
                    transition:background-color 2s ease;}

.someclass:hover {background-color:rgba(0,0, 0, 1);
                    transition:background-color 2s ease;}

You probably don't need the hyphen hack.  Chrome has supported it natively for the last 5 version; firefix for the last 9 versions and AFAIK there was never an implementation of the -ms- version and IE supports transitions since IE9.

Cd&
0
 
Kyle HamiltonData ScientistCommented:
CD&,

not sure what you mean by both directions. The code I posted transitions in and out. you don't need the transition rule on the :hover. that doesn't make sense. The transition applies to the element, then what ever happens to that element (ie: the hover) gets transitioned according to the transition rule on the element.

as far as -ms-, that was just automatic typing. If it's not needed, that's great. Personally, I don't really care much about IE, and don't spend too much time worrying about what works in IE and what doesn't doesn't.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now