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

Zeitgeizt	1725888696 using!! - thank u <3 Report Comment
Halo	1724148989 Using - i didn't even know you could do this before :0 Report Comment
suni	1723950781 uSING Report Comment
atmosphericsamurai ᯓ★	1723864199 i have a small problem with this thingy, the hover text appears but it's blurry and unreadable :( i'd appreciate it if anyone knows a solution for this Report Comment
robbie !! (✿◡‿◡)	1723497557 using ty Report Comment
bleachleech	1723351713 using Report Comment
nateymatey	1723080006 using woohoojg Report Comment
Zero	1723022015 Using!! Also i've seen that some people have troubles with the size of the images so what you're gonna do is search in the code "width" and instead of "auto" type in for example 100px or more if you want the image to be bigger! hope this helped! Report Comment also to change the size of the pop up image search for "max-width" and change it to the size of your liking! by Zero; 1723022230; Report
Revine ⚓️	1722965561 Using Report Comment
just me ⋆⋆⋆⋆	1722325335 using Report Comment
☆No.☆	1721080658 using Report Comment
vincenzo	1720981757 using Report Comment
Deafcake	1719313718 using Report Comment
Saii!! 丰✮	1719210097 Doesn't work in my profile Report Comment
Yuriologist	1718530497 using Report Comment
adrian!	1718023305 using! Tysm :D Report Comment
Annie Singer	1718001508 How the hell does this thing work! (This is awesome and im new at this lol) (seriously keep up the good work) Report Comment
sammy✮solzen	1716727786 using xx :) Report Comment
☆ CYN !!	1715108582 Using! :3 Report Comment
Flippy/Fliqpy	1714328954 using! Report Comment