Recreate this about us page

Discussion in 'HTML & Website Design' started by serialentre, Feb 8, 2015.

  1. #1
    Hi all,

    Disclaimer: I posted this in Javascript forum because I thought it's the most suitable place to post, but there are some CSS involved in this too.

    I am learning to recreate this about us page.

    When user hovers over the profile of a member, the rest of the page turns black and white, and the active profile has a hidden box that displays.

    I turned off JS on chrome, and the effect stopped working.

    Does anyone know how the effect is created with JS, and probably a little bit of CSS?

    I can't seem to the link the page but it's Khan Academy's About Us Page. Sorry about that.

    Appreciate your help.
     
    serialentre, Feb 8, 2015 IP
  2. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #2
    Hello there,

    for black white effect on hover, you can use CSS Grayscale like this :

    
    img#grayimg2:hover{
    -webkit-transition: all 1s ease;
    -webkit-filter: grayscale(1);
    }
    img{
    -webkit-transition: all 1s ease;
    }
    
    Code (markup):
    Then you add the id on image like this :

    
    <img id="grayimg2" src="Your-image-url" />
    
    Code (markup):
    goodluck
     
    themes4all, Feb 9, 2015 IP
  3. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #3
    Thankyou!

    Apologies for the delayed reply. Will give it a try and let you know how it goes
     
    serialentre, Feb 28, 2015 IP