Please help me align this image in my site header

I'm trying to add an image mascot similar to this (NSFW) site:

https://theporndude.com

Code (markup):

Screenshot: https://prnt.sc/WH2HV2BlZGGd

On my NSFW site:

https://bestlistofporn.com

Code (markup):

But I don't know where to put the code and how to show the top of the image hover the topbar like theporndude.com. Can someone please help me with this?

If you look at my code source, you'll find:

<div class="maddos-header">
<!--- english mascot here--->
<div class="row">

PHP:

This is where I'm trying to put my code, but I don't have sure if it is the best place:

<a href="#" class="blop-mascot-img"><img class="img-responsive" src="https://bestlistofporn.com/images/mascot-test.png" alt="Testing Mascot"></a>

PHP:

This is the CSS code that I'm trying to use:

.blop-mascot-img {
width: 260px;
position: absolute;
right: 24px;
top: -16px;
}

Code (markup):

This is how I want to show: https://prnt.sc/R_dnJmpLKTNv

The code isn't live yet because the site is open to the public.
But if you change at your browser source code, you can test it.

Unfortunately, my CSS knowledge is very poor to do this... Help?

Thank you in advance.

 

Done. Thank you anyway, guys!