So I'm trying to figure out how to make one of my background images transparent for This pet until I hover over it. But I just can't seem to find a good code. Problem might be I have like 3 different background images. Anyone help? I'll keep trying to play with it too.

Edit: I think I got the hover. But new problem, when I try to add a scroll box to the story area, it either cuts off my hover image or makes my text disappear.

You are going to need a new text box. When you add an image to a pet profile like this it's considered by the code as 'part' of pet_desc, the thing you are trying to add a scrollbar to. So when you force it to be 300px wide, well. It works perfectly, it's just not what you are trying to achieve...

Umm, no idea how much of an actual explanation you want but anyway. Right now your code looks like this

<style> *blah blah, CSS, styling, whatever* {position:absolute; left: 70px; top:315px; width:520px; height:600px;} </style>

blah blah Lorem Ipsum story text

<style> *some more styling for the harvester image* </style>

what you WANT it to look like for this to work would be more like this:

<style> *blah blah, CSS, styling, whatever* *some more styling for the harvester image* {position:absolute; left: 70px; top:315px;} {position:absolute; left: 0px; top: 0px; width:520px; height:500px; overflow:auto;} </style>

blah blah Lorem Ipsum story text

This should add a new text box placed within pet description you can write the story in that has a scrollbar once text exceeds the heght of 500px and that you can move around. The way you solved your hover image problem is kind of messy coding btw but it works, so.

That's exactly what I was looking for! Thank you! Yeah, the hover image was tricky for me to figure out. I'm a complete coding newbie, so any tips on how to clean it up would be appreciated.

Ack, sorry about this, been a bit busy recently ^^' Anyway, yes.

What you've done:

<style> img {opacity: 0.5; filter: alpha(opacity=40);} img:hover {opacity: 1.0;filter: alpha(opacity=100);} </style>

It's all fine and works as intended but ONLY if you have just one image, because what you just told the browser can be summarized as 'take all elements of the img type and give them so and so transparency' If you have more than one it will affect both. A more precise way of doing this would be for example

<style> {opacity: 0.5; filter: alpha(opacity=40); position:absolute; TOP:90px; Right:410px;} :hover {opacity: 1.0;filter: alpha(opacity=100);} </style>

You get an image that has a unique 'name' it can be referred to within to code you know won't clash with anything? Uhhh, idk if that makes sense, hopefully? Also, just as an aside it's better coding form to keep all styling code things in one place.

Oh that method makes much more sense. But for some reason, it's not working. I've tried moving it around to different locations, but no luck. Everything looks like it should work

You haven't included this bit:

You currently only have:

You need to make sure the image has the ID "harvester" so that it knows what you're telling it to do. So replace the bit you have with the thing I posted first.

Hm? I have the id code in my description