Animations to other elements.

Hello!
So after 1 year of no activity on userstyles i finally made new style for bazos.sk.Very simple style that changes things that look ugly and the main thing of it, that it is dark(i stole the color values from screenshot of twitter). It works but i want to know if there is any way to make some animations.
Actually i got the icon to move when hovering but i dont know how to change the opacity before and after hovering it.
i sent 3 pictures the first that does not have any text behind is how it should look before hovering, the next with text and the picture below is how it looks after hovering and the last is how ti looks right now before hovering.

And, animation:

.imgmain {
-webkit-filter: grayscale(100%) !important;
-webkit-transition: .5s ease-in-out !important;
filter: grayscale(100%) !important;
transition: .32s ease-in-out !important;
-o-filter: grayscale(100%) !important;
-o-transition: .5s ease-in-out !important;
margin-top: -40px;
}

and

a:hover > .imgmain{
margin-top: 0px;
}

i was trying something got it working but i still dont understand how the animations work..
175 x 128 - 3K
157 x 173 - 7K
168 x 116 - 5K
Sign In or Register to comment.