Geek Answers Handbook

The effect of transforming scale / rotation in CSS should not affect the child

I have a structure as follows:

html { background-color: rgba(0, 0, 0, 0.75); } .container { margin: 10% auto; text-align: center; } div > span { display: inline-block; } .horizontal { display: inline-block; position: relative; top: .1em; width: 15%; } .bubble { display: inline-block; padding: 0.5em; background: url(http://imgh.us/Service_bubble.svg) no-repeat; background-size: contain; transition: all 0.3s ease-in-out; } .bubble:hover { transform: scale(2) rotate(-90deg); } 
 <!DOCTYPE html> <html> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <meta charset="utf-8"> </head> <body> <div class="container"> <div class="bubble"> <span class="fa fa-inverse fa-google fa-lg"></span> </div> <hr class="horizontal" /> <div class="bubble"> <span class="fa fa-inverse fa-facebook fa-lg"></span> </div> <hr class="horizontal" /> <div class="bubble"> <span class="fa fa-inverse fa-twitter fa-lg"></span> </div> <hr class="horizontal" /> <div class="bubble"> <span class="fa fa-inverse fa-github fa-lg"></span> </div> </div> </body> </html>

As you can see with the help of the fragment, when you hover over any icon, the bubble wrapping any icon is scaled and rotated 90 degrees to the left. (what is expected). Now I do not want to extend the rotation to children ( div > span ). They should increase, but the rotation should not occur.

Also, if possible, I would also like to extrude hr when the icon freezes and it scales. hr should shift accordingly, leaving a small margin around the bubbles.

I tried setting the following property:

 div > span:hover { transform: scale(2); }

but when it falls, it scales the icon by 4 times, and the rotation is still happening.

Any ideas? I would like to rely only on CSS and would rather not include JavaScript here.

+6
source share
3 answers

An alternative solution would be to use the pseudo ( :before ) selector, which gets a turn on :hover .

 html { background-color: rgba(0, 0, 0, 0.75); } .container { margin: 10% auto; text-align: center; } div > span { display: inline-block; } .horizontal { display: inline-block; position: relative; top: .1em; width: 15%; } .bubble { display: inline-block; padding: 1em; transition: all 0.3s ease-in-out; position: relative; } .bubble:before { content:''; background: url(http://imgh.us/Service_bubble.svg) center no-repeat; background-size: contain; transition: all 0.3s ease-in-out; height: 100%; width: 100%; position: absolute; top: 0; left: 0; } .bubble:hover { transform: scale(1.5); margin: 0 10px; } .bubble:hover::before { transform: rotate(-90deg); } 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <div class="bubble"> <span class="fa fa-inverse fa-google fa-fw fa-lg"></span> </div> <hr class="horizontal"> <div class="bubble"> <span class="fa fa-inverse fa-facebook fa-fw fa-lg"></span> </div> <hr class="horizontal"> <div class="bubble"> <span class="fa fa-inverse fa-twitter fa-fw fa-lg"></span> </div> <hr class="horizontal"> <div class="bubble"> <span class="fa fa-inverse fa-github fa-fw fa-lg"></span> </div> </div>

jsFiddle: https://jsfiddle.net/azizn/gypu0pn2/

There are several things that I edited in your source code to create a smoother effect:

  • The icons have different widths, causing inconsistencies, as the .bubble container .bubble not have specific dimensions (height / width). To fix this, I added the fa-fw class, which makes the icons a fixed width for better consistency.

  • By default, the background image is positioned on top left , can cause problems with positioning if not changed to center .

  • The push effect is created using the added margin on :hover

Edit: More simplified HTML structure. Removed the .bubble container and used :after .

 html { background-color: rgba(0, 0, 0, 0.75); } .container { margin: 10% auto; text-align: center; } .container hr { display: inline-block; position: relative; top: .1em; width: 15%; } .bubble { padding: 1em; position: relative; transition: all 0.3s ease-in-out; } .bubble::after { content:''; position: absolute; background: url(http://imgh.us/Service_bubble.svg) center no-repeat; background-size: contain; transition: all 0.3s ease-in-out; height: 100%; width: 100%; top: 0; left: 0; } .bubble:hover { transform: scale(1.5); margin: 0 10px; } .bubble:hover::after { transform: rotate(-90deg); } 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <span class="bubble fa fa-inverse fa-google fa-fw fa-lg"></span> <hr> <span class="bubble fa fa-inverse fa-facebook fa-fw fa-lg"></span> <hr> <span class="bubble fa fa-inverse fa-twitter fa-fw fa-lg"></span> <hr> <span class="bubble fa fa-inverse fa-github fa-fw fa-lg"></span> </div>

jsFiddle: https://jsfiddle.net/azizn/1uqrqoda/

+2
source

One way to do this is to turn the children in a different direction.

The code I added in css:

 .bubble:hover span { transform: rotate(90deg); } .bubble span { transition: all 0.3s ease-in-out; }

This is a workaround. Hope there is another way to do this.

 html { background-color: rgba(0, 0, 0, 0.75); } .container { margin: 10% auto; text-align: center; } div > span { display: inline-block; } .horizontal { display: inline-block; position: relative; top: .1em; width: 15%; } .bubble { display: inline-block; padding: 0.5em; background: url(http://imgh.us/Service_bubble.svg) no-repeat; background-size: contain; transition: all 0.3s ease-in-out; } .bubble:hover { transform: scale(2) rotate(-90deg); } .bubble:hover span { transform: rotate(90deg); } .bubble span { transition: all 0.3s ease-in-out; } 
 <!DOCTYPE html> <html> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <meta charset="utf-8"> </head> <body> <div class="container"> <div class="bubble"> <span class="fa fa-inverse fa-google fa-lg"></span> </div> <hr class="horizontal" /> <div class="bubble"> <span class="fa fa-inverse fa-facebook fa-lg"></span> </div> <hr class="horizontal" /> <div class="bubble"> <span class="fa fa-inverse fa-twitter fa-lg"></span> </div> <hr class="horizontal" /> <div class="bubble"> <span class="fa fa-inverse fa-github fa-lg"></span> </div> </div> </body> </html>
+2
source

The architecture of your html is not fully adapted to your problem. If you could change it, the best thing would be to do:

  <div class="container"> <div class="bubble"></div> <span class="fa fa-inverse fa-github fa-lg"></span> </div>

The inner div and span of the bubble should be exactly the opposite of the container div. For instance:

 .container { position: relative; } .container > div, .container > span {position: absolute; top: 10px; left: 10px;}

Then you can apply various transitions / animations to the div and range.

 .container:hover > div { transform: scale(2) rotate(-90deg); } .container:hover > span { transform: rotate(-90deg); }
+1
source

More articles:


All Articles