Follow up: they came through. Faith validated

This is the second time UPS says they delivered something without ever showing up

Time to hope whoever actually received it will come through orz

As people I’ve staffed with can attest, I love making feedback forms. On top of being helpful, it’s fun to read what comes in.

That is all.

why is there a heat wave every other weeeek

It’s not a cough, it’s that I inhaled a piece of jelly trying to get it out the bottom of the cup, I swear

Do mine eyes deceive me or didyeSSS AVA’S DEMON FINALLY UPDATED

-talking about taking vacations-
Everyone: yeah, I always need a few days first to fully disconnect from work
Me, dissociating the second the workday ends if not sooner: ha haha yeah, totally…

What you have now is one box whose content is the text and whose background is the hover. Because of that, when you apply your 0.5 opacity to .Adopts1, it applies to everything, text included, hence the graying out.

What you want is two boxes (or layers) overlaid on top of each other:

1) One with the text, which starts with 0% opacity by default and fades in on hover
2) One with the image, which starts with 100% opacity and fades out on hover, below the text

Plus you’ll want another div to contain those two layers, which will also be what you’re hovering over. Like what Dijit said though, there are a couple different approaches, and this is just one. Preview below

[div][attr="class","Adopts-wrapper"]
[div][attr="class","Adopts-image"] [/div]
[div][attr="class","Adopts-text"]your text here[/div]
[/div]

[newclass=.Adopts-wrapper]width:200px; height:334px; color:black; position: relative; overflow: hidden;[/newclass]
[newclass=.Adopts-text]opacity: 0; position: relative;[/newclass]
[newclass=.Adopts-image]width:334px; height:334px; position: absolute; top: 0; left: 0; background-image:url(https://i.imgur.com/ziH5vmO.png);[/newclass]

[newclass=.Adopts-wrapper:hover]width: 334px;[/newclass]
[newclass= .Adopts-wrapper:hover .Adopts-text]opacity: 1;[/newclass]
[newclass= .Adopts-wrapper:hover .Adopts-image]opacity:.5;[/newclass]


You’ll notice I also added styling in the form of position: absolute; top: 0; left: 0. The absolute positioning of the image is what allows it to overlap the same space as the text instead of the two boxes jenga-ing on top of each other. The relative positioning around .Adopts-wrapper is to tell the image to respect the size constraints and position of your hover area, otherwise it would be positioned according to the size of your browser. I recommend looking up position css for a more in-depth explanation of how it works.

[attr="class","Adopts-wrapper"]

[attr="class","Adopts-image"]

[attr="class","Adopts-text"]your text here

[newclass=.Adopts-wrapper]width:200px; height:334px; color:black; position: relative; overflow: hidden;[/newclass]
[newclass=.Adopts-text]opacity: 0; position: relative;[/newclass]
[newclass=.Adopts-image]width:334px; height:334px; position: absolute; top: 0; left: 0; background-image:url(https://i.imgur.com/ziH5vmO.png);[/newclass]
[newclass=.Adopts-wrapper:hover]width: 334px;[/newclass]
[newclass= .Adopts-wrapper:hover .Adopts-text]opacity: 1;[/newclass]
[newclass= .Adopts-wrapper:hover .Adopts-image]opacity:.5;[/newclass]

can’t actually tell if I’m part of any cliques or not :thonk:

Granted, but it’s perpetually cloudy so you can never see it

I wish to be inspired for this project

Short and sweet

Resisting the urge to give the blunt answer for complaint-questions

It’s so humid I feel like I’m walking underwater orz