pagedoll that hops on hover (feat. sayaka miki)

1 week ago - by FauxHumanoid - Backgrounds & Overlays - used 93 times

inspired by those ddlc chibi pagedolls that change images on hover. the hover animation is inspired by ddlc as well!

if sayaka isn't up to your tastes, you can change the character freely. replace the first background-image url with your default image, and the second with your hover image. you can host images either through profile photos or an external site like filegarden! custom images work best when scaled to fit each other. i'd recommend tweaking the container width for wider images than mine, making it higher shouldn't break anything. mess around with it!

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<style>
  @keyframes hoppy {
    20% {bottom:45px;}
    to {bottom:40px;}
  }
  .hoppy-pagedoll {
    width:150px;height:300px;
    position:fixed;bottom:40px;right:5px;
    background-size:contain;background-repeat:no-repeat;background-position:center;
    background-image:url("https://file.garden/ZZO2vbOs0CiXN-Ec/friendrewind/hoppy/SAYAKA_1.png");
    }
  .hoppy-pagedoll:hover {background-image:url("https://file.garden/ZZO2vbOs0CiXN-Ec/friendrewind/hoppy/SAYAKA_2.png");animation: hoppy 0.3s;}
</style>

HTML Code

This element also has an HTML part - paste it into your About Me (or wherever the description says).

<div class="hoppy-pagedoll"></div>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Backgrounds & Overlays

« Back to Backgrounds & Overlays | « All Profile Elements