Currently I am working on editing this page.
When you hover over the cat, its eyes blink or two black dots randomly appear. My goal is to prevent the random blinking dots from appearing. I want to keep the hover object attached to the cat/background image even when the screen dimensions change, ensuring that the blinking effect works universally across all screen sizes.
Below is the code for the hovering object:
#cateyes {
position: fixed;
margin-top:-280px;
margin-left:1088px;
opacity:1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#cateyes:hover{
margin-top:-270px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
And here's the code for the background image:
body{
background-color: {color:background};
background-image: url('{image:background}');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
margin:0px;
color:{color:text};
font-family:times;
font-size:10px;
line-height:100%;
z-index:2;
}
I have tried positioning cateyes in the bottom right and adjusting margins, but using position:bottom right does not yield the desired result. Your assistance with this issue would be greatly appreciated.