Centering, layering and rotating (animating) img’s

[drone4four]

Have a look at this pen: https://codepen.io/Angeles4four/pen/mqoWOJ?editors=1100

I have two issues with this code.

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?

Thanks for your attention.

edit: grammar correction

[Paulie_D]

Firstly, margin:auto has no centering effect on absolutely positioned elements.

Secondly, the h1 IS centered but as it’s block level it’s 100% wide.

What you need to do is center the text IN the h1…and text-align:center will do that.

[Paulie_D]

As for the rotation..you just have bad selector.

.site-logo:hover .two 

will select .two which is a child of .site-logo

What you want is .site-logo.two :hover…etc

[drone4four]

Thank you for this reply, @Paulie_D.

I added text-align: center to the h1 element in my CSS. It looks great now.

I changed the three .site-logo elements to look like this: .site-logo.one :hover (and the same for ‘.two’ and ‘.three’) but now all three images are frozen: https://codepen.io/Angeles4four/pen/LOamYM

What am I doing wrong? I’m sorry if I miss understood your post, Paulie.

[Paulie_D]

Oops..sorry ..typo .

Try .site-logo.two:hover etc. without the space.

But be aware that if these images are stacked, you can only hover the top one at a time.

[drone4four]

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.

[Paulie_D]

Looks like a stacking issue..I’ve removed the positioning which seems to fix it.

https://codepen.io/Paulie-D/pen/qVwEXg?editors=1100

[drone4four]

Thank you, Paulie. This is an enormous help. I appreciate the time you spent reorganizing my code. It performs wonderfully.

A final question: How easy would it be to have the images animate on mouse scroll, rather than hover? Like, when the user scrolls up and down the webpage, is it possible to have the images rotate 30 degrees back and forth using pure CSS? Or would this feature be in the category/realm of JavaScript?

Thanks again, Paulie.

[Paulie_D]

Determining anything based on a scroll is a JS issue unfortunately.

[Author]

Posts