Can I achieve this with CSS only?

[CodeGraphics]

I did a little thing that I want to use for a website which will show about each of the team.
There are 3 social icons, which I positioned absolutely.
The layout is ok.
My problem is that I want to add it some css effect, but am not sure if css can do it.

Here is the plan.
1. I want when a user hovers over any of the social icon, it will slide up a bit. I know if the icons are positioned relative, I will just add transition to it and make it’s hover- top:-5px;
But since it’s positioned absolute, it’s not working. Is there a work around to this?

2. I want a situation when a user hovers over any of the icon, the big circle background carrying the human picture will change to the background color of that particular icon that was hovered.

Here is the [codepen](http://codepen.io/alex13/pen/AynDL “”) and the [fullscreen](http://codepen.io/alex13/full/AynDL “”)

[Paulie_D]

Don’t use absolute positioning?

Is there a reason why you’re using that?

[CodeGraphics]

So that they will sit at the edge of the picture.

[Paulie_D]

I think you could do much better with a better structure of the HTML…that might solve some issues with the CSS effect you are after.

I’ll have to think about it.

[CodeGraphics]

The number one issue is solved. Check the pen.
Now, @Paulie_D, hack number two for me.

[Paulie_D]

Most of the way there but it still needs some work as I had to remove the links to get it done.

The effect only works on the YouTube icon at the moment.

http://codepen.io/Paulie-D/pen/tIshK

[CodeGraphics]

@gcyrillus, thank u. But I added this:

a.fb:hover ~ img.pix {
background:#3b5998;
transition:all .5s ease-out;
}

And it did not work.

[CodeGraphics]

Just look at this [one.](http://codepen.io/MattiasBuelens/pen/DFolu “”) Someone did it from Stackoverflow. I tried it on mine, still i didnt work.

[CodeGraphics]

Thank you sirs. Solved.

[Author]

Posts