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 82 comments ( View all | Add Comment )

Elin.Liju	1758280499 using Report Comment
ꜱᴛᴀʏɴꜱᴡᴇʀᴠɪʟʟᴀɪɴ⊹ ࣪ ˖	1756624698 usingg Report Comment
[ ♯ 𝔸𝕞𝕪 ʚɞ 🍮🎹⋆.˚]	1754427661 using!! Report Comment
callisto	1752101477 THIS IS SO COOL!! using!! Report Comment
🎢🍫CHOCO🍫🎡	1750898463 Using!!!! :D Report Comment
Tete	1749670844 Usinggg!!! Report Comment
Maggot	1748857954 using!!! Report Comment
archie	1747211644 using Report Comment
NoveyWasn'tHere	1747048788 Using!!! Report Comment
jamesrose.xoxo	1746563122 totes using Report Comment
₊✩‧₊˚౨MothManFigৎ˚₊✩‧₊	1745892644 i would use but im confused asf!!! ToT Report Comment
SYKO_SYZTEM	1745256848 How do I make them go side-by-side because for me they're just going up and down. :( Report Comment make the image smaller by vincenzo (WIP); 1745477363; Report
dazey	1744248137 using! Report Comment
CRUSHER	1744176178 I wanna use this SO BAD but i dont understand how or what to do or where to put stuff. its really cool though!! Report Comment where it says =" IMAGE_URL " add the url for the image in between the quotations (it needs to be a link unfortunately, an online one... by dazey; 1744248225; Report and then where it says 1ST LINE TEXT< br/ >2ND LINE TEXT, add the name, media, whatever u want (replace the 1st line 2nd line text, delete that part and add what u want to show up instead by dazey; 1744248291; Report
tearing’s child 🦄💎/💜	1744075317 using Report Comment
Mismagius	1743420410 using but text doesn't show :( Report Comment
crroppi	1741587915 using Report Comment
gummyLungz ★★	1741427500 usinsggs!! Report Comment
ciel	1741249299 USING!!! I love it so much Report Comment