Grow your CSS skills. Land your dream job.

How Was This Effect Achieved?

  • # June 23, 2013 at 3:35 pm

    Go here: http://www.adhamdannaway.com
    Hover over the image horizontally as if you are dragging your cursor to extreme right or left, and the guy will just be changing with the typography ‘Designer’ and ‘Coder’.

    Then open: http://www.adhamdannaway.com/contact
    Wait for five second, the image will change. Then hover over the face of the guy and the former image will be revealed as if it’s a kind of lens.

    How was this effect achieved. Again, did you notice how the pages load? Ajax? It seems jquery is really powerful and subtle.

    # June 23, 2013 at 3:39 pm

    Do you ever read the source? :D

    The effect on home page is a simple hover effect, no big deal. Regarding the contact page, it’s only two images placed on top of eachother, revealed on hover, following the cursor with JavaScript.

    # June 23, 2013 at 3:44 pm

    Ok. But i think the effect on the home page is more than css hover. Because the text also responds and fades.

    # June 23, 2013 at 3:45 pm

    So? Progressive opacity decrease isn’t a very hard thing to do. :)

    Edit: seems to be conditioned by mouse cursor. So JS involved. Simple enough I guess.

    # June 23, 2013 at 3:46 pm

    :) @Hugo, you must be funny.

    # June 23, 2013 at 3:47 pm

    I most certainly am.

    # June 23, 2013 at 4:11 pm

    really cool effect, never see something similar

    @HugoGiraudel do you know some sort of tuts to achive this effect?

    # June 23, 2013 at 4:14 pm

    This seems a little bit too specific to be the topic of a tutorial. Or maybe the author has writen about it somewhere.

    I’ll try to replicate this effect if I get some free time tomorrow. Shouldn’t be too hard.

    # June 23, 2013 at 4:28 pm

    thanks @HugoGiraudel will be waiting

    # June 23, 2013 at 5:05 pm

    @Hugo, will be waiting also.

    # June 23, 2013 at 10:26 pm

    @Hugo, Looking forward to seeing your solution as well.

    Thanks man :P

    # June 24, 2013 at 3:22 am

    have another question about this site when you click on page about, all content appears one after another it was made with http://api.jquery.com/delay/ or ?

    # June 24, 2013 at 4:32 am

    A very, very, very dirty proof of concept. Many adjustments required.

    http://codepen.io/HugoGiraudel/pen/8d43c3d359c5c7ef3cb71ac3b399801b

    # June 25, 2013 at 5:33 am

    nice realization @HugoGiraudel

    I have tried play a little too, but my knowledge of JS and jQuery is primitive as a result my code too :)
    http://codepen.io/Kuzyo/pen/fzsiF
    I have question why when I first hover over my red block width works fine but when I then hover over black nothing happens? Can somebody explain?

    # June 25, 2013 at 5:41 am

    Z-index.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".