Facebook-Style Profile Header (UiKit 3)

  • Hello everybody,

    I'd like to create a Facebook-like profile header (image) with Uikit 3...


    Well - I'm actually not very experienced with Uikit 3, so maybe you can see something how to deal with it:

    This is my source:


  • Actually I added


    Code
    1. <div class="uk-width-1-1">
    2. <div class="uk-cover-container uk-height-medium">
    3. <img src="test.jpg" alt="">
    4. </div>
    5. </div>


    just right on top of it. Looks "okay", but it would be cool if the image would have some "fade out" effect to the bottom and/or the cards could be a bit "lifted", just like on FB:

  • maybe this helps https://bootsnipp.com/snippets/eo1k3 to work out


    in css


    .profile-img a {


    bottom: 15px;

    box-shadow: none;

    display: block;

    left: 15px;

    padding: 1px;

    position: absolute;

    height: 160px;

    width: 160px;

    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;

    z-index: 9;


    }


    here when you change bottom to a higher number, the image moves up