Miscellanity's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Layering gifs

Have you ever wanted to layer gifs/pngs like these into a mega picture/gif like these? Screenshot-2024-03-05-at-8-48-03-PM Screenshot-2024-03-05-at-8-47-30-PM Here's the basic code for it. It's a modified version I found it here:Layering Pictures


<style>

.container {

    position: relative;

}

 

 

.image0 { 

position: absolute;

left: 0px; 

right: 0px; 

top: 0px;

bottom:0px;

}

.image1{

position: absolute;

left: 0px;

right: 0px; 

top: 0px;

bottom:0px;

}

</style>

<img src=" " class="image0" /> 

<div class="container"> 

<img src="image1" class="image1" /> 

</div>


UntitledExplanationUntitled


The container is the main gif/png that you want to put other gifs/pngs on. By settings the div class to image0 or another placeholder name, you can move it freely. Otherwise it'll be set to the place you put it in. You can have multiple mega gifs/pictures just put them in their own <style> </style>. Also rename the classes because it'll mess up.


As for the positions


left: -1px; moves it left 1

left: 1px; moves it right 1

right: -1px; moves it right 1

right: 1px; moves it left 1

top: -1px; moves it up 1

top: 1px; moves it down 1

bottom: -1px moves it down 1

bottom: 1px moves it up 1

The gifs/pngs used


UntitledUntitled

I tried uploading them as 3 mega gifs but it got wonky. If I can put them here, I'll update them here. It's a matter of experimenting so have fun. To see it in action check out the bottom of my profile 

~Misc~


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )