6

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 snippet, when you hover over any of the icon, the bubble wrapping any icon scales up, and rotates to the left by 90 deg. (which is expected). Now, I'd like to not propagate the rotation to the children (div > span). They should scale up, but the rotation should not occur.

Also, if possible, I'd like to displace the hrs as well, when an icon is hovered over, and it zooms. The hrs should shift accordingly, leaving a little margin around the bubbles.

I've tried setting the following property:

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

but it scales up the icon by 4x when hovering, and the rotation still occurs.

Any ideas? I'd like to rely only on CSS, and would prefer not to involve JavaScript here.

hjpotter92
  • 78,589
  • 36
  • 144
  • 183
  • 3
    One way would be to rotate the child the other way but it is a dirty workaround. It works tho. – Pierre C. Apr 14 '16 at 15:26
  • Pierre C.'s suggestion is the only way when working with children (alternatively, one could use positioned sibling elements). – Paul Apr 14 '16 at 15:27
  • 1
    Possible duplicate of [Prevent children from inheriting rotate transformation in CSS](http://stackoverflow.com/questions/9513588/prevent-children-from-inheriting-rotate-transformation-in-css) – kirkpatt Apr 14 '16 at 15:54

3 Answers3

2

One way do to this is to rotate the children in the other direction.

Code I added to the css:

.bubble:hover span {
  transform: rotate(90deg);
}

.bubble span {
    transition: all 0.3s ease-in-out;
}

This a workaround. I 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>
Pierre C.
  • 1,426
  • 1
  • 11
  • 20
  • If you hover over the facebook logo, you'll see the `f` cutting across the bubble boundary. – hjpotter92 Apr 14 '16 at 15:43
  • @hjpotter92 It is actually the circle around it that is translating... I do not know why tho. – Pierre C. Apr 14 '16 at 15:47
  • @hjpotter92 After some investigation it seems to be the facebook logo that is causing it. Replacing it with the google logo works fine. Who goes on Facebook anyway xD – Pierre C. Apr 14 '16 at 16:00
  • Actually, all the icons (or the bubble around them) are translating, it is because the `f` extends vertically, that we're able to view the effect. You can notice it if you change`fa-facebook` to let's say `fa-deaf`, `fa-volume-control-phone`, `fa-arrows-v` etc. – hjpotter92 Apr 14 '16 at 16:20
  • @PierreC. that is because the `background-image` is not positioned to the center. Also facebook's icon is slightly smaller than the rest. – Aziz Apr 15 '16 at 07:37
2

An alternative solution would be using a pseudo selector (:before) which gets the rotation 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 a few things that I edited in your original code to create a smoother effect:

  1. The icons have differing widths causing inconsistencies since the .bubble container has no defined dimensions (height/width). To fix this, I added the fa-fw class which makes the icons fixed-width for better consistency.

  2. The background image is positioned to top left by default, could cause positioning issues unless changed to center.

  3. The "push" effect is created using added margin on :hover

Edit: A more simplified HTML structure. Removed the .bubble container and used :after instead.

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/

Aziz
  • 7,685
  • 3
  • 31
  • 54
  • 1
    This solution is good, but a little bit too complicated if you own the html. I would encourage this solution if your are using a static component and can't modify the html. – Rafouille Apr 15 '16 at 08:23
  • @Rafouille you are right, see my edit: https://jsfiddle.net/azizn/1uqrqoda/ don't think it can be simpler than this. – Aziz Apr 15 '16 at 08:41
1

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

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

The bubble inner div and span should be position absolutely against container div. For example :

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

Then you could apply different transitions / animations to the div and the span.

.container:hover > div {
    transform: scale(2) rotate(-90deg);
}
.container:hover > span {
    transform: rotate(-90deg);
}
Rafouille
  • 863
  • 10
  • 16