Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    reverse hover effects

    Hi
    Can someone please help me figure out how to reverse the hover transition effect so the icons start colourful, and go to grey on hover ?

    I could photoshop the icons and reverse the images, just wondering if CSS can do it.



    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    CSS can’t change the saturation of an image. Not forward and not in reverse.

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    18
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Reverse hover effect

    Please try it. May be it will work.

    <div id="info"><img src="infow1.png" width="800" height="800" /></div>
    This is the CSS markup...

    #info {
    background: url(infow2.png) 0 0 no-repeat;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -400px;
    margin-left: -400px;
    width: 800px;
    height: 800px;
    z-index:100;
    opacity: 1;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    }
    #info img:hover{
    opacity:0;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    }
    So overall I want the infow.png to fade out, when hover over the image then fade back in when you leave.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    If it involves swapping images, just switch the names of the images.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    New Coder
    Join Date
    Jul 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, i forgot to put the cssdeck link up.

    The image upon hover moves from top to bottom. I wanted to reverse it to start at the bottom and transition to the top.



    http://cssdeck.com/labs/xfbcbheu

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Just switch the background positions.

    Add
    Code:
    background-position: 0px 48px;
    to ".social-slide".

    Then for ".social-slide:hover" change the background position to "0 0".
    My signature :)

  • #7
    New Coder
    Join Date
    Jul 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    perfect - thanks very much


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •