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

dazey	1744248137 using! Report Comment
Sprout!!~🚒🍼	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
ccpi	1741587915 using Report Comment
gummyLungz	1741427500 usinsggs!! Report Comment
ciel	1741249299 USING!!! I love it so much Report Comment
son of bhaal	1739198724 using! tysm :] Report Comment
chimere	1739111818 USING! Report 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 Hiii! I think it might be cause u have it in autoplay maybe? I don't know about coding but there must be a template on the music layaouts with no autoplay :3 by 𐙚MegaRAWR♡.°₊ˎˊ˗; 1738961145; Report It looks like you can't make a play/pause function in css unless the video is visible, I noticed. If it was a shirt song clip and I didn't loop it, it would actually work well, but then you can't replay it because css doesn't work like that lol. I decided I wanted to do something else anyway for the music (still using this for photos lol) but it was still kinda cool to look into. I'm new to all of this, so css still makes my head spin, haha!! by Lili-chan; 1739539713; Report Oooooh, yeah that kinda sucks but hopefully you'll find something better to add to your profile!! Looks really cute atm :3 by 𐙚MegaRAWR♡.°₊ˎˊ˗; 1739566505; Report aww thanks >u< by Lili-chan; 1740148214; Report
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