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

Neil/Jace!	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
rot	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
✖🤍 Rika! (≧▽≦)	1765126377 using!^^ Report Comment
Hana	1762762341 Using!! <3 Report Comment
Lusechka/FK(✿◡‿◡)	1761854254 USINGGG Report Comment
kynxxiii	1761508446 using! Report Comment
LuckiRaw	1761307290 using this!! Report Comment
✧𝓹𝓮𝓪𝓻𝓵𝔂_𝓿𝓮𝓻𝓼𝓮✧	1760987192 Using, I luv this! Report Comment
deliii (ˊᗜˋ*)	1760833051 using!! Report Comment
Red.is.rotten	1759148235 using on blog thank u Report Comment
👁r4y击(1pr0m1se)	1758942763 im gonna try to use!! Report Comment
CR3AT0R	1758870818 It looks so kewll!! I wonder if you could make another version for the "about me" where you show OCs and etc! <3 Also using! Report Comment Well you can add another column in the interests section, but not really in the about me section. by ・❥・Skylight :; 1761203449; Report