Forums

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
    Posts
  • #43322
    bbilander
    Participant

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

    #127832
    wolfcry911
    Participant
    #127833
    bbilander
    Participant

    Thanks Wolfcry,
    That works perfectly!

    #127834
    Paulie_D
    Member

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