Question

I have a hexagon shape made with CSS :before and :after pseudo elements. I’m trying to reproduce the effect on this website: http://www.upperfirst.com (and I am aware they use canvas)

The issue is that if I use multiple elements, the size increase on hover doesn’t animate properly. I fixed the animation by using :before and :after with a border instead. Now I want to get the images working, but I can’t seem to figure out how to line up the border image and the middle part’s images so it looks seamless.

Here’s a fiddle of what I have so far: http://jsfiddle.net/uwZ8w/

Thanks!

Answer 1

This answer is based off your revised code that sort of uses my hexagon technique. With respect to avoiding the graphic alignment issue you noted, I have two suggestions.

1. Have your images scaled to the size you want them already so that you avoid any background-size scaling like you are currently doing.
2. Likewise, avoid the scaling of the .inner divs by 200% in the width and height (you shouldn’t have to do that, they should be the same size as the .hexagon div and the immediate children that you have classed as .before and .after). However, with regards to that…

… I’m curious why you used a .inner div at all, instead of the :before pseudo elements (to avoid cluttering your code). It appears to me that you may not understand what a pseudo element is (since you have a content: ''; in your .inner css, which is irrelevant if it is not a pseudo element but a real element). Either that, or you accidentally left that code in there when you switched from a pseudo element to a real div (for whatever reason that switch was made).