Need Help with Overlay Placement and Size!! [CLOSE

Hello there, I am a bit of a newbie to coding as I've only recently been getting back into it and I am looking for some help with the placement of the overlay and changing the dimensions if possible. I have tried re-adjusting the code that I'm using, but thus far, nothing has worked.

HERE IS THE PAGE of the pet that I am using. I am looking to make the size similar to THESE DIMENSIONS.

Below is the code that I'm using for the overlay. I got it from W3Schools.

CODE




<style>
.container {
  position: relative;
  width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 1s ease;
}
.container:hover .overlay {
opacity: 1;
}
</style>


Fade in Overlay
Hover over the image to see the effect.

Also, if you have any criticisms, please feel to leave them below!

ok got it, yeah you've got a lot of extra stuff in there that doesn't need to be there. try this instead:

<style> , -ban, -ban-main, -lrc, -rrc, , , -right, , , , .bookmark, , , .prototip, , h2, .hustler, , {display: none} {overflow: visible} , {background-color: transparent; height: auto!important} *{margin: 0; padding: 0} .notice {background: none; border: 0} , , , , .container-fluid { width: 100%!important; position: static!important; margin: 0!important; padding: 0!important}


.container-fluid, body {background: url(http://i.imgur.com/3Z8iPxA.jpg?1) center center repeat ; height: 100%}
::-webkit-scrollbar {width: 5px}
::-webkit-scrollbar-track {background: white}
::-webkit-scrollbar-thumb {background: }
::-webkit-scrollbar-thumb:hover {background: }
 {
position: relative;
width: 650px; height: auto;
min-width: unset; min-height: 100%;
margin: 25px auto -18px auto; padding-bottom: 120px;
color: ; font-size: 10px;
background: white; border: 50px solid }
 {width: 100%; margin-top: -95px}
 {
position: relative; left: 185px;
width: 280px; height: 280px;
background: url(https://i.imgur.com/z1f2Utu.png);
background-size: 280px; transition: 0.5s all ease}
:hover {
background: url(https://img.subeta.net/pets/charlie_chibi.png);
background-size: 280px}
.pet_name {font-family: georgia; font-size: 30px; color: }
i.red.icon {color: !important}
, .pet_spotlight {
position: relative;
width: 150px; height: 110px;
padding: 0; border: 1px dashed ;
text-transform: lowercase; color: ;
font-size: 8px}
 {left: 100px; top: 420px}
.pet_spotlight {left: 395px; top: 12px}
 {
position: relative; top: 30px;
text-align: center}
 {
position: relative;
top: 70px; width: 100%;
margin: 0 auto; padding: 0;
text-align: center}
.treasure_item {
display: inline-block; float: none;
margin: 0 3px 3px 3px}
.credit {font-size: 10pt}
a, a:link, a:active, a:visited {color: }
a:hover {color: }
b {color: }
i {color: ; font-family: georgia}
h1 {font-size: 10pt!important}
hr {color: ; background-color: ; height: 1px; width: 90%; border: none}
</style>
stubborn | mischievous | unrealistic | very childish




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lacus aliquam, lobortis lacus eu, lacinia orci. Quisque at mi vehicula, pellentesque mauris eu, vehicula eros. Aenean interdum dapibus eros, sed placerat tortor porttitor a. Nullam porttitor urna non lacus molestie fermentum. Morbi augue dolor, ultrices quis elit sed, posuere iaculis sapien. Nullam semper elit pulvinar magna interdum, a fermentum est porta. Nam sagittis tincidunt sapien. Sed ut iaculis sem, at ultrices nibh.


Integer malesuada dolor in consequat rutrum. Proin quis enim a orci accumsan porttitor. Vivamus lobortis orci quis diam tempor rutrum quis et nisl. Nam eget gravida orci, non semper ipsum. Cras diam nisl, laoreet a volutpat eget, vestibulum a velit. Phasellus cursus urna eget metus fringilla, vitae mattis augue vulputate. Aenean porta libero nunc, porta convallis lorem luctus ut. Nunc interdum dapibus suscipit. Quisque fermentum posuere orci, eu rutrum nisi. Fusce in volutpat sapien. Nunc ornare congue laoreet. Donec non suscipit urna. In ultrices placerat lectus, a pharetra mi efficitur in. Nam fermentum tellus et fringilla fermentum.


Cras varius neque vel odio eleifend pretium. Etiam ut dolor metus. Etiam vel sapien nec nibh tincidunt euismod. Proin augue dolor, finibus at mi a, vestibulum blandit est. Sed quis porttitor nibh. Etiam sit amet tortor ac dolor luctus sollicitudin. Donec sit amet bibendum erat.











~~Credits~~


Background image is found here

I By 

II BY 

III and IV By 

Main piece By 

Coding and story by me, base code from 's premade baby

CHARAHUB PROFILE

Logged Out

Need Help with Overlay Placement and Size!! [CLOSE

Replies

Fade in Overlay

stubborn | mischievous | unrealistic | very childish