hi i have rocks for a brain and i need den coding helppppp

uh im dumb and cant figure out how to get a image in front of everything and align it like this??? x___x

if its not possible on wd uhhh sorry for being stupid and just ignore this board

thats what im trying to do, w/ cowboys pic on top of my hover box!! 

Okay this might seem a bit complicated, but I tried to break it down a bit. The basics of it is that you  just have to make a new class for your image, change the position, and then set the z-index higher than the box it's on top. Then, only put your image code inside that class. Here's an example:

HTML:
<div class="testimage"><img src="YOUR-IMAGE-CODE.PNG"></div>
<div class="testbox">blah blah blah words</div>

CSS:

/* this is the blank box under the dog image */
.testbox {
    width: 80%;
    height: 80px;
    color: black;
    background: white;
    position: relative;
    top: -120px;
    left: 80px;
    -transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
}

/* the code that makes the blank box expand when hovered */
.testbox:hover {
    width: 80%;
    height: 200px;
    -transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
}

/* the code just for your image that will re-position it */
.testimage {
    text-align: right;
    position: relative;
    top: -80px;
    right: 100px;
    z-index: 10000000000;
}

The main take away here is the last one in blue (the "testimage", but you can name that whatever you want). The position: relative; code positions the div class and everything in it (in this case, just your image, see the HTML) relative to where it would normally be. So normally your image would be above your box if you don't position either of them. The text-align: right; code aligns your class (aka your image) to the right. You can change that to center or left. The top: -80px; and right: 100px; moves your class/image 80px UP and 100px to the left relative to its normal position. The pixels are how much you are ADDING space. So right: 100px; means 100px are added on the RIGHT side, thus your image is pushed to the LEFT. The -80px means you are taking AWAY 80px from the top (because the minus), thus your image is moved upward.

So, without these, the image is set to the right above the box code which is its normal position. The align right makes the image align to the far right. Then, because we want the image on top of the box code (and a bit to the left, not centered, but to the right of the "den/profile" buttons so it doesn't overlap), we use the top and right codes to move the class/image a little closer to the center.

NOW. Remember we've only moved the image itself? The box code is still going to be in it's normal position. So we need to also position that (relative position and then the top/left codes here) to push the box a bit upwards as well so it sits under the image. Because your image and boxes are different than mine, you'll have to do trial and error testing on what specific numbers work for you (for example, maybe 100px on the right is too little and you may need 50px instead). So, you'll just have to finagle with it.

And lastly, the z-index is like layers on photoshop. A class with a z-index of 10 is going to be on "top" of a class with a z-index of 1. These can be sometimes finicky in my experience, and since we don't really care about anything here other than the box and the image, I made the z-index very high for the image.

(Sorry that's so long. Let me know if you have any questions or need clarification!)

@fireflii, wow - I’m not OP but the above is awesome ^^^ thank you!

I was curious (if you don’t mind me tagging along with a question!) is it possible to do the above (image on text box) without CSS? I like my den and profile very simplistic and just use html, but would love to have the current header text ON the box, and art float, like above! I just use html/don’t need the hover for the text box. Just positioning of image!

Does it def require some type of simple, plain white css to do? I’ve tried reading tetra’s guide but I don’t want to change a million things, I’m not really sure what the bare required minimum is. 

Ahhh okay, had a feeling after trying to finagle it ahah:)

Thanks so much - you truly rock! Will certainly try this, appreciate it. If I can ever repay ya, let me know!

No problem, glad to help ^^