#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    6
    Rep Power
    0

    Image mouseover effect


    Hi, can anyone suggest a script or let me know what sort of code should be used to achieve the same effect as this demo?

    demo.joomshaper.com/extensions/free-extensions/image-gallery.html

    I do know how to use opacity in CSS to make an image darker or lighter on mouseover, but this looks like it's using javascript and it looks much slicker. I'd really like to have darkened images that light up on mouseover, but with that fade effect instead of just instantly changing like the opacity setting does. Any sugestions? Thanks!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, rsny.

    That demo is using MooTools to animate between two values of the opacity property. Other libraries, like jQuery, can do the same thing.

    Alternately, most browsers (but not IE 9 and older) now support CSS3 transitions which can also be used to do that.
    http://www.netmagazine.com/tutorials...s3-transitions
    http://www.designfloat.com/blog/2012...ion-tutorials/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    I've created an example of how you might do this using jQuery here http://jsfiddle.net/PVxn9/, hope it helps.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    6
    Rep Power
    0
    Thank you so much for taking the time to help me out. Everything is set up and working perfectly now!

IMN logo majestic logo threadwatch logo seochat tools logo