Layout published by Marsinya

published 1694269213
updated 1764960110

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

Nihil	1774190882 using Report Comment
Elly	1774117891 Lo voy a usar, me encanta 💗💗 Report Comment
击x_zoeymustdie_x击	1774099463 using!! Report Comment
kei O_o	1772871418 IM USING THIS THANKS .!!!!! Report Comment
⋆ flavi	1772363207 using Report Comment
Viktor	1770920032 Using Report Comment
Kinana	1769606609 uisngg Report Comment
Merso	1769522645 Using!! Report Comment
neilesque	1769352971 usinggggg I LOVE this layout 🥹 Report Comment
aeroxp	1768438963 How to use it? It doesn't work on my profile D: Report Comment
PomPomPurin	1768188727 Gonna use this! Thanks!!!!! Report Comment
𝗦𝘁𝘂𝗻𝗼𝗿𝗶🎭	1767617052 yeha using! Report Comment
SYN	1767289085 USING THIS :-D Report Comment
⋆˙⟡ mira ˎˊ˗	1767286878 using!! Report Comment
⋆˙⟡ mira ˎˊ˗	1767286878 using!! Report Comment
Mael	1767167886 prob using this in the future, i love it Report Comment
StoryTeller	1766027308 USING! Report Comment
DEVOTIONAL	1765147950 OOOHHH THIS IS SO COOL :oDDDDD Report Comment
୨୧￤YUYU ഒ·° //#1 MAGOLOR AND KANADE FAN!!	1765126377 using!^^ Report Comment
Hana	1762762341 Using!! <3 Report Comment