Grow your CSS skills. Land your dream job.

Combining images with CSS shape on :hover

  • # March 12, 2013 at 6:42 am

    Hi All,

    I’m having trouble getting an image to appear when hovering over a CSS shape. I want the image (an arrow) to sit outside the shape (in this case it’s a circle) to the bottom left pointing upward – see below code for example. At present the -50px margin on the div containing the arrow.png is also shifting the text within the circle. Is there a way to fix this so only the image is moved to the appropriate spot? Perhaps I would be better off replacing the CSS shapes with plain old jpgs but I thought it would be cool to get CSS to draw the shapes. Your thoughts would be much appreciated!

    [codepen example](http://codepen.io/bbilander/pen/opBsE “”)

    # March 12, 2013 at 7:15 am

    Thanks Wolfcry,
    That works perfectly!

    # March 12, 2013 at 7:17 am

    Sure…use a pseudo element…something like this. http://codepen.io/Paulie-D/pen/Krmhd

    I’ve also tidied up the repeated CSS because I’m OCD like that…

    EDIT: Damnit WOLF….beat me too it.

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

You must be logged in to reply to this topic.

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