Grow your CSS skills. Land your dream job.

Can I achieve this with CSS only?

  • # May 31, 2013 at 3:53 pm

    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 “”)

    # May 31, 2013 at 3:57 pm

    Don’t use absolute positioning?

    Is there a reason why you’re using that?

    # May 31, 2013 at 3:59 pm

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

    # May 31, 2013 at 4:01 pm

    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.

    # May 31, 2013 at 4:21 pm

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

    # May 31, 2013 at 4:24 pm

    I agree with @Paulie_D 100% , it will allow you as well to use the selector you need

    Your ‘absolute link’ won’t move, but what’s inside can be pushed within.

    have a look : http://codepen.io/gcyrillus/pen/FAdsG

    your replied meanwhile :)

    # May 31, 2013 at 4:54 pm

    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

    # May 31, 2013 at 4:59 pm

    Did you notice: http://codepen.io/gcyrillus/pen/FAdsG

    • structure changed
    • selecteur ~ used
    • Slide and bg colors fixed

    Actually, the answer to the topic question is yes :)

    # May 31, 2013 at 5:44 pm

    @gcyrillus, thank u. But I added this:

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

    And it did not work.

    # May 31, 2013 at 5:52 pm

    @CodeGraphics

    did you update your HTML structure and add classes on < a > tags ?

    # May 31, 2013 at 5:58 pm

    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.

    # May 31, 2013 at 6:07 pm

    this one or mine did put links ahead the image in HTML structure.

    So , you can apply CSS to IMG from A.

    A + IMG : style an IMG tag standing right after an A tag

    A ~IMG : style any IMG tags standing after any A tag, even if in between , there’s another tag.

    (curious, do you have a link to your topic out there ?)

    Okay, found it , answers and explanation are similar.Where do you get lost ?

    # May 31, 2013 at 7:00 pm

    Thank you sirs. Solved.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".