Report Blog Entry
AGUMON CODE
<style>
.digivice {
background: url('https://i.ibb.co/2S2R4fg/digivice.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
height: 320px;
width: 320px;
z-index: 0;
}
.agumon {
background:url('https://i.ibb.co/Q92PKwp/agumon.gif') no-repeat;
position: relative;
width: 160px;
height: 160px;
top: 123px;
left: 130px;
}
.agumon:active {
background:url('https://i.ibb.co/yWcZhxb/greymon.gif') no-repeat;
background-size: 70%;
position: relative;
width: 160px;
height: 160px;
top: 105px;
left: 105px;
}
</style>
<div class="digivice">
<div class="agumon"></div>
</div>
GABUMON CODE
<style>
.digivice {
background: url('https://i.ibb.co/2S2R4fg/digivice.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
height: 320px;
width: 320px;
z-index: 0;
}
.gabumon {
background:url('https://i.ibb.co/FBk5kCx/gabumon.gif') no-repeat;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 115px;
}
.gabumon:active {
background:url('https://i.ibb.co/Qj0t5gX/garurumon.gif') no-repeat;
background-size: 70%;
position: relative;
width: 160px;
height: 160px;
top: 105px;
left: 105px;
}
</style>
<div class="digivice">
<div class="gabumon"></div>
</div>
BIYOMON CODE
<style>
.digivice {
background: url('https://i.ibb.co/2S2R4fg/digivice.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
height: 320px;
width: 320px;
z-index: 0;
}
.biyomon {
background:url('https://i.ibb.co/XjDZYTr/Biyomon.gif') no-repeat;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 113px;
}
.biyomon:active {
background:url('https://i.ibb.co/m0BkPG5/Birdramon.gif') no-repeat;
background-size: 60%;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 115px;
}
</style>
<div class="digivice">
<div class="biyomon">
</div>
</div>
PALMON CODE
<style>
.digivice {
background: url('https://i.ibb.co/2S2R4fg/digivice.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
height: 320px;
width: 320px;
z-index: 0;
}
.palmon {
background:url('https://i.ibb.co/t3mw00q/palmon.gif') no-repeat;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 110px;
}
.palmon:active {
background:url('https://i.ibb.co/FgQmqs1/togemon.gif') no-repeat;
background-size: 60%;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 115px;
}
</style>
<div class="digivice">
<div class="palmon"></div>
</div>
TENTOMON CODE
<style>
.digivice {
background: url('https://i.ibb.co/2S2R4fg/digivice.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
height: 320px;
width: 320px;
z-index: 0;
}
.tentomon {
background:url('https://i.ibb.co/Fm88JG1/tentomon.gif') no-repeat;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 110px;
}
.tentomon:active {
background:url('https://i.ibb.co/h1qhvKk/kabuterimon.gif') no-repeat;
background-size: 60%;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 115px;
}
</style>
<div class="digivice">
<div class="tentomon"></div>
</div>
GOMAMON CODE
<style>
.digivice {
background: url('https://i.ibb.co/2S2R4fg/digivice.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
height: 320px;
width: 320px;
z-index: 0;
}
.gomamon {
background:url('https://i.ibb.co/KxGGKr2/gomamon.gif') no-repeat;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 110px;
}
.gomamon:active {
background:url('https://i.ibb.co/Jj8CRRk/Ikkakumon.gif') no-repeat;
background-size: 60%;
position: relative;
width: 160px;
height: 160px;
top: 112px;
left: 114px;
}
</style>
<div class="digivice">
<div class="gomamon"></div>
</div>
PATAMON CODE
<style>
.digivice {
background: url('https://i.ibb.co/2S2R4fg/digivice.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
height: 320px;
width: 320px;
z-index: 0;
}
.patamon {
background:url('https://i.ibb.co/3zt1r4P/Patamon.gif') no-repeat;
position: relative;
width: 160px;
height: 160px;
top: 110px;
left: 112px;
}
.patamon:active {
background:url('https://i.ibb.co/JvkSNL7/Angemon.gif') no-repeat;
background-size: 60%;
position: relative;
width: 160px;
height: 160px;
top: 111px;
left: 114px;
}
</style>
<div class="digivice">
<div class="patamon"></div>
</div>
GATOMON CODE
<style>
.digivice {
background: url('https://i.ibb.co/2S2R4fg/digivice.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
height: 320px;
width: 320px;
z-index: 0;
}
.gatomon {
background:url('https://i.ibb.co/V2rZGGW/Gatomon.gif') no-repeat;
position: relative;
width: 160px;
height: 160px;
top: 85px;
left: 90px;
}
.gatomon:active {
background:url('https://i.ibb.co/vZNgbgB/Angewomon.gif') no-repeat;
background-size: 70%;
position: relative;
width: 160px;
height: 160px;
top: 102px;
left: 105px;
}
</style>
<div class="digivice">
<div class="gatomon"></div>
</div>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
oginome
Sprites taken from Digimon fan wiki:
https://digimon.fandom.com/wiki/Digimon_Wiki
if you want to center the digivice, paste "margin: auto;" in the .digivice{} section of the CSS
by oginome; ; Report