Help recreating this on hover overlay

[serhiicss]

Hello,

I am trying to recreate on hover overlay just like in the image.

1) How to make those lines to cross each other?

2) How to make the icons separate links?

Thank you in advance!

[Paulie_D]

If you can make a minimal demo in Codepen.io we can take a look at waht you have so far.

That said, a simple Google Search for “Text Overlay on Image” would get you most of the information you need.

[serhiicss]

Sorry I rushed with the question and made it vague.

Here is what I have so far

codepen

Ideally I would like to recreate the on hover state just as pictured.

But at least I’d like to recreate those white edge lines that are crossing each other.

Thank you.

[Paulie_D]

I’d probably use a couple of pseudo-elements on the overlay

http://codepen.io/Paulie-D/pen/dOJQVp

[serhiicss]

That is exactly what I need. Thank you very much!

[Author]

Posts