The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    # 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.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed