Facebook-Style Profile Header (UiKit 3)

SPQRInc · Oct 16th 2018

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:

Code

<div class="uk-container uk-container-expand">
<div class="uk-grid uk-grid-medium" data-uk-grid>
<div class="uk-width-2-3@l uk-width-1-2@xl">
<div class="uk-card uk-card-default uk-card-small uk-card-hover">
<div class="uk-card-header">
<div class="uk-grid uk-grid-small">
<div class="uk-width-auto"><h4 class="uk-margin-remove-bottom">Test</h4></div>
</div>
</div>
<div class="uk-card-body">
Test
</div>
</div>
</div>
</div>
<div class="uk-grid uk-grid-medium uk-grid-match" data-uk-grid>
<div class="uk-width-1-2@s uk-width-1-3@l uk-width-1-4@xl">
<div class="uk-card uk-card-default uk-card-small uk-card-hover">
<div class="uk-card-header">
<div class="uk-grid uk-grid-small">
<div class="uk-width-auto"><h4 class="uk-margin-remove-bottom">Test</h4></div>
</div>
</div>
<div class="uk-card-body">
{{--<img src="img/mapa3.svg" alt="">--}}
<p class="uk-text-muted uk-text-small uk-text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>

Display More

SPQRInc · Oct 16th 2018

Actually I added

Code

<div class="uk-width-1-1">
<div class="uk-cover-container uk-height-medium">
<img src="test.jpg" alt="">
</div>
</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:

Fosphatic Duke · Oct 16th 2018

fading effects are easy going Roman just look into animation from uikit 3. When you want that the effect is repeated on scrolling then comoine the wished effect with scrollspy component.

SPQRInc · Oct 16th 2018

Hm, I did not make clear what I wanted - sorry.

Think of the "fade" effect more like a gradient. But I already had a look at it: Seems not to be possible with CSS.

Well, actually I would like to have this with UiKit: https://stackoverflow.com/ques…profile-picture-with-divs .

Ric · Oct 17th 2018

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

Share