Hey rileycooper ! There's actually a couple ways to do this. However, I'll show you what my go-to is. Its a bit unethical so please dont tell my coding professor I did this.

So, to hide the text in the hover box, you can yeet this into your :hover box!:

color:transparent

so then your code should looks something like this:

[div][attr="class","Adopts1"]Is this it? Is this IT? AM I FINALLY FIGURING OUT HOVERS?[/div]

[newclass=.Adopts1]width:200px; height:334px; background-image:url(https://i.imgur.com/ziH5vmO.png?1);color:black;[/newclass]

[newclass=.Adopts1:hover]color:transparent;width:334px;opacity:.5;overflow:auto;-moz-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;[/newclass]

I'm working off the assumption you wanna hide the text in the after image with the opacity. But if I'm mistaken, it still works out! Just flip flop the commands listed above! hopefully this helps!

Edit: aaaa I didnt see your bottom stuff! In truth, preserving the text opacity while fading the background gets into more advanced coding stuff. However, if you wanna give it a shot, I'd recommend giving pseudo-elements (::before/::after) a read! here is what I usually do:

So instead of yeeting the opacity into the main div (.Adopts1), you can do something like this:


[div][newclass=.Adopts1::before]opacity:1;[/newclass]

[newclass=.Adopts1::after ]opacity:.75;[/newclass]


what this should does is declare the opacity without affecting everything in the box. This doesn't end up working pls forgive me, I'm monkey brain rn bc im trying to skin, and learning the pseudo-elements myself! I'm learning about them here if you're interested.

If this doesn't work out, I'd be happy to help you out! you can find me on discord at dijit#2839

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]

thank you for being a queen and clarifying my monkeybrain words

Thank you both for the help!!