Pet profile hover issue?
Replies
For some reason, the background image (a semi-transparent white box) and text in the "story" div (on the left; the "lorem ipsum" placeholder text) on my pet Madokami's profile fade out at different speeds, and I'm not sure why?
I have the div set to fade in when hovered over, which seems to work fine, for the most part... But when you move the cursor away again, the background vanishes instantly while the text slowly fades. Anyone know a fix for this? I want to have the background fade in and out at the same pace as the text.
Here's my code for the div and hover (sorry if it's a mess):
DIV CODE
{
top: 135px;
left: 50px;
position: absolute;
width: 305px;
height: 450px;
background-color: transparent;
filter:alpha(opacity=60);
opacity:0.6;
transition: opacity .75s ease-in-out;
-moz-transition: opacity .75s ease-in-out;
-webkit-transition: opacity .75s ease-in-out;
border: none;
overflow-x: none;
overflow-y: auto;
padding: 5px;
}
:hover { background-color: transparent; background-image: url(https://i.imgur.com/gFsLu6u.png); filter:alpha(opacity=100); opacity:1.0; transition: opacity .75s ease-in-out; -moz-transition: opacity .75s ease-in-out; -webkit-transition: opacity .75s ease-in-out; border: none; overflow-x: none; overflow-y: auto; padding: 5px; }
;){kind=link}
You need something to transition between, so a before and after setting.
Using a background colour will be way easier, but if you want to use an image, set it before the hover, and then change the opacity of the whole div when hovered.
What you were doing is adding the image on hover, so when you leave, it returned to what was there before, nothing.
Any stuff I removed from the code isn't needed, you can replace it with this no issue.
All you have to do is set the main opacity, and background opacity, then what they should be while hovered.
{
top: 135px;
left: 50px;
position: absolute;
width: 305px;
height: 450px;
overflow-y: auto;
padding: 5px;
transition: all .75s ease-in-out;
opacity: .6;
background: rgba(255, 255, 255, 0);
}
:hover {
opacity: 1;
background: rgba(255, 255, 255, .6);
}
[edit]
You can use transition:all on the treasure so the greyscale will change smoothly too.
- Oh, thank you very much! I had originally tried to use a background colour, but I'm still very new to CSS, so I wasn't sure how to go about that. I knew how to make image hovers fade in/out, so that's what I went with, haha.
But a background colour is a lot simpler-- thanks!