- This topic is empty.
December 4, 2017 at 11:02 am #263318
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
h1elements aren’t center aligning even though I invoke
margin: autoin three different locations. Why aren’t
h1and 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 correctionDecember 4, 2017 at 11:05 am #263335
margin:autohas no centering effect on absolutely positioned elements.
h1IS centered but as it’s block level it’s 100% wide.
What you need to do is center the text IN the
text-align:centerwill do that.December 4, 2017 at 11:07 am #263337
As for the rotation..you just have bad selector.
.twowhich is a child of
What you want is
.site-logo.two :hover…etcDecember 4, 2017 at 12:54 pm #263350
Thank you for this reply, @Paulie_D.
text-align: centerto the
h1element 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.December 4, 2017 at 1:13 pm #263353
Oops..sorry ..typo .
.site-logo.two:hoveretc. without the space.
But be aware that if these images are stacked, you can only hover the top one at a time.December 4, 2017 at 2:25 pm #263356
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
.threeelements rotate and animate as expected. But
.oneis 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.December 5, 2017 at 2:51 am #263395
Looks like a stacking issue..I’ve removed the positioning which seems to fix it.December 5, 2017 at 5:38 pm #263452
Thank you, Paulie. This is an enormous help. I appreciate the time you spent reorganizing my code. It performs wonderfully.
Thanks again, Paulie.December 6, 2017 at 3:17 am #263464
Determining anything based on a scroll is a JS issue unfortunately.
- The forum ‘CSS’ is closed to new topics and replies.