How to implement background rotation?

Question

css

I made rhombuses (I just turned the squares), but you need to insert a picture into each rhombus, the current problem is that it turns upside down. Please tell me who has already done this:

How to rotate the picture back?

And how to make the hover paint over the rhombus (current half) when in vision?

Here is my code : https://jsfiddle.net/Valeriy1996/5mjz4rf0/2/

Answer 1

Certainly a very terrible code. And why do you have different rotation angles for different browsers. So intended?
Took a turn for webkit. Here are your diamonds

Answer 2

The example is very large and it takes a long time to understand it.
The meaning is this: to make a wrapper. Rotate the wrapper by +45 degrees and the content by -45.

Answer 3

Make a diamond block with SVG. Use CSS to put the background image on the diamonds. On top of each diamond in SVG is another diamond half that is transparent by default and opaque on hover.