5
I’m facing a strange problem. I have some links to social networks with a border-radius and with the effect of hover edge rotation, as in the image below:
When I give hover on these social media links, a div there in another part of the site loses its border-radius.
Example:
I have no idea what might be giving this interference, since each one of your class. Someone knows?
Online viewing. (I believe the problem is in the slider plugin - Cycle2)
CSS of social media links:
.link-social { width:31px; height:31px; display:inline-block; }
.link-social:before {
display:block; content:""; width:31; height:31px; border:1px #DF9201 solid;
-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
}
.link-social:hover:before {
border:1px #DF9201 dashed;
transform:rotate(36000deg); -webkit-transform:rotate(36000deg); -moz-transform:rotate(36000deg);
transition: all 500s ease; -webkit-transition: all 500s ease; -moz-transition: all 500s ease; -o-transition: all 500s ease;
}
CSS of the round div:
.shape-slideshow { width:617px; height:617px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; overflow:hidden; }
The HTML is missing :)
– Renan Gomes
All right, I put it there.
– Ricardo
Butterfly effect :)
– bfavaretto
It looks like a Webkit bug. I saw it occur in Chrome and Safari, but not in Firefox.
– bfavaretto
Poisé. I will try to change slider plugin.. maybe it works. Some suggestion?
– Ricardo
Ah, I hadn’t noticed that the plugin was in your jsfiddle. Without it it doesn’t actually occur. And even with it, it doesn’t occur to turn off the transition in the Hover of the other element. But I couldn’t figure out the exact cause.
– bfavaretto