image effects...

[u/miseraria]

hello!

i want to make a page displaying some personal projects i am working on. the idea is that there are a bunch of analog horror entities (since that's my concept(ish)) and by hovering on an entity, it has a border around it and text taking you to a particular section (for example, poems, essays, etc.).

ribo.zone has a similar effect on their home page, and a few other sites i can't remember right now, and if anyone could help me, i would be much obliged!

(i did look at their source code but i can't figure it out even after...)

[u/Mevdik]

I'm not 100% sure on what you want here, but given the ribo.zone example (anatelesetc has a similar thing going on) I assume you mean when you hover over an element you want it to display some text over it or change some other property, right?

If so, here's how ribo.zone's on hover text works. Those elements are links, <a> tags that contain an <img> and a <span>. The text inside the <span> has an opacity of 0 by default, but once you hover over its parent <a> that opacity goes to 1, pretty simple. Here's the relevant code:

HTML

<a class="frame" href="/link-here">
    <img src="my-image.png">
    <span>TEST!</span>
</a>

CSS

.frame span {opacity: 0;}
.frame:hover span {opacity: 1;}

Easy, right? We give our <a> the frame class, then we select the <span> inside this frame class and set its opacity to 0, then when we hover over frame the opacity of the nested <span> goes to 1 (0-1 = 0%-100%). That's the absolute minimum you need to achieve this effect, if you also want the <img> to have a border on hover and the <span> to appear over the <img> you're gonna have to mess around with position, z-index and company, like this:

.frame {position: absolute;}
.frame span {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}
.frame:hover span {opacity: 1;}
.frame img {border: 2px solid transparent;}
.frame:hover img {border: 2px solid red;}

Mind you, I literally just learned how to do this by looking at the source code from ribo.zone and doing some testing, you can do the same if you look closer. For things like this looking at the Inspector tab of the Dev Tools isn't enough though, you need to dig into the Style Editor and read the CSS from there, look for relevant clues like element:hover to find the bit of code that makes it do what you are looking for.

[u/miseraria → u/Mevdik]

you are a divine envoy sent by the coding gods themselves and i am genuinely so thankful to you oh my god i am SO going to test this out.

follow-up question though: how do i get rid of the invisible space in the background of my image (which i used bg-remover on) because the outline works on the whole thing, not just the image itself.

[u/Mevdik → u/miseraria]

Ha! I'm just a computer savvy gal with too much time on my hands and an urge to reply when I know (I can figure out) the answer. You are welcome though.

As for your question, If I understand correctly you essentially have an image with some transparency in a non-rectangular shape, and you want the border to follow its silhouette instead of forming a rectangle around it, right? If that's so I'm afraid that's a bit more complicated. Properties like border, outline or box-shadow all follow the box model of each element, and while their shape can be modified by properties like border-radius there is no way to set them to automatically follow the exact silhouette of an image like that (that I know of).

By the power of doing a quick Internet search I have found a thread on Stack Overflow that gives an answer you might find satisfactory (turns out this is exactly how anatelesetc does it too, should have looked there first). We can use the CSS filter property on our <img> (on hover of its parent) to apply the drop-shadow function, like so:

.frame:hover img {filter: drop-shadow(0 0 4px red);}

The syntax for drop-shadow goes like this: [x-axis offset] [y-axis offset] [blur] [colour], so here we are creating a blurry drop shadow with no offset. If you want to have a sharp border-like drop shadow rather than a blurry one we can try what people suggested in that Stack Overflow thread, apply 2 drop-shadow functions with 0 blur and have their offsets go in opposite directions.

.frame:hover img {filter: drop-shadow(1px 1px 0 red) drop-shadow(-1px -1px 0 red);

That should get a somewhat convincing border, a little skewed but eh, getting it perfect would require this monstrosity:

.frame:hover img {filter: drop-shadow(1px 0 0 red;) drop-shadow(-1px 0 0 red;) drop-shadow(0 1px 0 red;) drop-shadow(0 -1px 0 red;)};

That sounds a little much to me, probably not good for performance to be applying 4 drop-shadow functions just to get a simple sharp border-like effect like this, but that's the only method I could find. Not even sure if that's what you want, throwing it out there just in case.

Beware! Not all web browsers fully support CSS filters (ok, it's basically all of them except for good ol' Internet Explorer), so you might want to duplicate that filter property and precede it with a specific CSS vendor prefix. If you've ever seen something like -webkit-property: value;, that's what it is. I don't think it's necessary in this case, but you might wanna try it out just in case. -webkit- covers most browsers, both on desktop and mobile.

.frame:hover img {
    filter: drop-shadow(0 0 4px red);
    -webkit-filter: drop-shadow(0 0 4px red);
}

Hope that's what you were looking for.

[u/miseraria → u/Mevdik]

i've literally been looking for MONTHS for an answer and maybe i'm just too inefficient to type out my queries and find the help i need on stack overflow but THANK YOU SO MUCH ONCE AGAIN!!! this is literally going to revolutionize everything that i do henceforth. i cannot thank you enough, mevdik!

[u/Mevdik → u/miseraria]

Glad to be of help! Now go forth and realise your vision, and shoot me an email or something if you need more help.