CODEWITHSUNDEEP
cssvuetify.js
Kyle Corbin Hurst
Kyle Corbin Hurst

Reputation: 1121

over lap avatar image over background image and element

I am trying to center overlap my avatar over a background image and maintain how the avatar is centered over the background in a responsive way:

enter image description here

Code

<v-card>
    <v-img
        src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
        height="200px"
        class="woo"
    >
    <v-avatar style="postion:absolute; left: 44%; top: 80% " rounded width="80px" class="pa-1" height="80px">
        <img width="80" height="80" src="https://cdn.vuetifyjs.com/images/lists/1.jpg">
    </v-avatar>
    </v-img>
</v-card>

Codepen example

What's happening is that the avatar over flows the background image, but the avatar gets hidden behind the div. I've tried z-index but it's not working.

Upvotes: 0

Views: 924

Answers (1)

crazychukz
crazychukz

Reputation: 676

You need to set overflow to visible of the parent element since it has a fixed height of 200px

<v-card>
    <v-img
        src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
        height="200px"
        class="woo" style="overflow: visible"
    >
    <v-avatar style="postion:absolute; left: 44%; top: 80% " rounded width="80px" class="pa-1" height="80px">
        <img width="80" height="80" src="https://cdn.vuetifyjs.com/images/lists/1.jpg">
    </v-avatar>
    </v-img>
</v-card>

Hope this helps. Cheers

Upvotes: 1

Related Questions