The first is that the img’s and h1 elements aren’t center aligning even though I invoke margin: auto in three different locations. Why aren’t h1 and imgs aligning in the centre?
The second issue is specifying the img to each transform and rotate uniquely. ‘one’ should transform 35 degrees, ‘two’ 225deg and ‘three’ 325deg. I’ve attempted to achieve this at lines 10, 15, and 19 in the CSS by adding subclasses, .one, .two, .three next to .site-logo:hover. When I uncomment those lines, the img’s are just frozen on the spot. What am I doing wrong here? How do I get each of the three img’s to be layered and rotate by a few degrees in different directions with mouse over?
As you explained, Paulie, since the imgs are stacked, its hard to animate the imgs below the topmost one. So I changed the img position to relative for testing purposes. That change is now present in my newest pen, linked to here: https://codepen.io/Angeles4four/pen/QOoBRK?editors=1100
The .two and .three elements rotate and animate as expected. But .one is still frozen. I tried playing with the transform variables in degrees. It is still always idle. Any idea as to why? I am totally baffled.
Thanks you, @paulie_d for your help and for your patience so far.
Thank you, Paulie. This is an enormous help. I appreciate the time you spent reorganizing my code. It performs wonderfully.