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!
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/wolfcry911/pen/hoqLc
Thanks Wolfcry, That works perfectly!
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.