Layout published by Marsinya

published 1694269213
updated 1729060154

Add to Favorites

View Layouts

View Profile

Report Layout

Hoverbox Gallery (DEMO)

Tags: hover, simple

Description:

This allows you to add a gallery that displays a bigger image when hovering an icon/thumbnail. Follow the instructions inside the code.

Credit is optional. Though I highly appreciated if you add my name (Marsium) somewhere.
(〃＾▽＾〃)

You can use this in multiple ways like:

Expand images (art, photographs, gifs, ect.)
Display list/favorites (characters, music albums, games, shows, and movies)
Text only (aka tooltips. Useful for spoilers)
Mini-profiles (OCs and plural systems)
Collections (small images like blinkies)

Note: If the image you are using is too big or too small, change the size using an image editor. (Use this https://ezgif.com/resize)

Please do not remove or change my name in the code.

Examples:

Check my profile to see how I use it to create a gallery of my favorite characters

Comment if you are going to use it :D
Feedbacks are welcome!

You are freely to stylized it with HTML & CSS. If you don't know how, you can request in the comments have it stylized and I'll design it for you based on your profile layout.

I hope you like it! (´｡• ω •｡`) ♡

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Marsinya (https://layouts.spacehey.com/layout?id=40686) -->

<!-- (replace THUMBNAIL_URL for small image and IMAGE_URL for large image) -->
<div class="hover-gallery">
<!-- IMAGENAME -->
    <div class="img-container">
        <img src="THUMBNAIL_URL" alt=""/>
        <div class="popover">
            <img src="IMAGE_URL" alt=""/>
            1ST LINE TEXT<br/>2ND LINE TEXT
         </div>
    </div>
<!-- IMAGENAME -->
    <div class="img-container">
        <img src="THUMBNAIL_URL" alt=""/>
        <div class="popover">
            <img src="IMAGE_URL" alt=""/>
            SINGLE LINE TEXT
         </div>
    </div>
<!-- IMAGENAME (copy this placeholder from this line...) -->
    <div class="img-container">
        <img src="THUMBNAIL_URL" alt=""/>
        <div class="popover">
            <img src="IMAGE_URL" alt=""/>
            PLACEHOLDER TEXT
         </div>
    </div><!-- (...to this line. then paste it below this line to add more image) -->

</div>


<!-- Code created by Marsium (https://spacehey.com/layout?id=1796199). You can paste this section to the bottom of your About Me. Message for help! -->
<style>
    .hover-gallery {display: flex; flex-wrap: wrap;}
    .hover-gallery .img-container {position: relative; display: flex; justify-content: center; width: auto; margin: 4px;}
    .hover-gallery .img-container > img {height: fit-content;}
    .hover-gallery .popover {display: none; flex-direction: column; position: absolute; background: white;border: 2px solid var(--lighter-blue); color: inherit; width: max-content; bottom: calc(100% + 10px); text-align: center;align-items: center; padding: 10px; font-family: inherit; max-width: none !important; font-weight: bold; pointer-events: none;}
    .hover-gallery .popover > img:last-of-type {padding-bottom: 10px}
    .hover-gallery .img-container:hover .popover {display: inherit;}
    .hover-gallery .popover::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: var(--lighter-blue) transparent transparent transparent;}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 61 comments ( View all | Add Comment )

Lili-chan	1737776012 So I went insane and decided to try and make it play music, and for the most part it's working, but it won't stop once it starts, lol! Any tips? I love this so much, you're awesome for making this. Report Comment
Glissen	1737756685 USINGG Report Comment
Lili-chan	1737726215 Using! (Working on it lol) Report Comment
AALEXARR	1737552044 omg i need those blinkies !!!!!!! Report Comment
⦻ ALUCARDS #1 HUBBY ⦻	1736853499 Using!! Report Comment
Mamin	1735955299 THIS IS SO COOL!! Your code is very clean thanks for sharing it with the public d(^_^)o Report Comment
KSPBMK Picnic System	1734282097 Using!! Report Comment
KazuhiraMarius	1734151656 will use it someday. Report Comment
liam	1734130191 gonna use :3 Report Comment
Max	1733876239 lol im thinking about using it but i need a guide rn Report Comment
K9 ☣	1733695578 Using :) Report Comment
sonder_chan	1733097308 using !!!! Report Comment
insomniac	1732676373 using Report Comment
sof x_x	1730541245 using for my ocs >:3 Report Comment
midnight (VERY wip profile)	1730506730 using!! :D Report Comment augh i need help i dont know what im doing ToT by midnight (VERY wip profile); 1730507248; Report
bleep blorp ::P	1730352373 using !! ^^_^^ Report Comment
Lincoln / tin	1729342529 Usinh !!! Report Comment
★ willow .ᐟ	1727544590 using!! Report Comment
bowie ! o_<☆	1727483127 OBJECT SHOW CHARACTERS SPOTTED >o< Report Comment
Olivo	1727167824 using! its really fun ty Report Comment