The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Combining images with CSS shape on :hover

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #43322

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


    Thanks Wolfcry,
    That works perfectly!


    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)
  • The forum ‘CSS’ is closed to new topics and replies.