Menu
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.
969
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:
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.
The background image is positioned to top left by default, could cause positioning issues unless changed to center.
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/
79
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
