Layout published by Marsinya

published 1694269213
updated 1694329185

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)

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

☆ CYN !!	1715108582 Using! :3 Report Comment
🎀Moxie🍮	1714328954 using! Report Comment
Ｒａｖｅｎ	1712700030 Using! but i got a issue! they come out as like huge images but i want them in tiny little sections like you do on your profile Report Comment If the image you're trying to use is too big, prob resize it and upload it somewhere. I can help you more if you can explain the problem more :D by Marsinya; 1713062539; Report That would be well appreciated :D by Ｒａｖｅｎ; 1713143030; Report
LuminousRen	1708317802 using :D Report Comment
MASON + BOOTHILL ⁰⁰ 🪶	1707961407 OMG GARRY FROM IB!! ( also using :3 ) Report Comment
🧠Turron ꒷꒦	1707323002 Usinggg Report Comment
VISTA	1706940874 Using. :] Report Comment
caruli	1705605385 using!!! i love it <333 Report Comment
💊 Levi 💉	1705263937 Using!!!! Report Comment
✩Ruru✩	1701444190 using!! I'll be adding art lots of art of my oc later on ^-^ i credited u as well!! thank you for making this!! Report Comment
Gogo	1701394913 ¡¡¡¡USING!!!! I'm having a hard time putting a gif ( ͒˃̩̩⌂˂̩̩ ͒) I don't know if you could make a tutorial or something to explain how to make it work. keep programming you do it pretty well Ｏ(≧∇≦)Ｏ Report Comment
SourceCodeSerenader	1700456784 SO RAD!!! thank you!!! might use - i've bookmarked this entry!!!! KEEP CODING!!!![[: Report Comment
RAINY RAINER !!!!!! ☆⌒(ゝ。∂)	1699173273 Using!!! Report Comment
☆ F!shyLOL ☆	1698014277 I will be using this tysm for the awesome code ^^ Report Comment
⛤ Nina / Tweek ! !	1697027873 using! Report Comment
sillygoofyfishy	1696714198 USING!!! ur soo cool btw :DD Report Comment
Jane	1696610452 Using! :) Report Comment
Rapid	1695874636 Using I think Report Comment
Eppy boi! :3 🎤 ☆ミ	1694665486 using!!!!!1111!!!!1 Report Comment
Dex_bfdi100	1694356305 OMGAA IM USING THIS ^_^!!1 Report Comment