rounded borders flickering

[laudeamus]

Hi,

I was wondering if someone could tell me why my round borders are doing funny things when I hover my mouse over them. I added the following to the home middle widget:

.home-middle {
margin-top: -50px;
}

.home-middle .widget {
-webkit-border-radius: 7px;
moz-border-radius: 7px;
border-radius: 7px;
overflow:hidden;
clear:both;
}

Everything looks fine initially. But when I hover my mouse, the rounded corners flicker for a second. Does anyone have a clue as to why this is happening?

Thanks!

http://www.rubyxweb.com

[David Chu]

Hallo,
That's a tricky one. I think removing links ("a") from the CSS3 transitions would help. (It's a bigger pain to add border-radius to your photos because of your right-left layout.)

Do a find on "transition" in your style.css, and it's a big bunch of items, look for the first "a". I tried to include the code here, but bbPress wouldn't let me do that for some reason. Some word filter, I'm guessing.

I hope that helps,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[laudeamus]

You nailed it! I had to remove the following transition elements and it stopped doing it right away.

-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;

Perhaps there's still a way to tinker with the img:hover attribute below, to get them both to work at the same time, but I couldn't figure out a way.

.home-middle .featuredpost img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
Thanks!

[David Chu]

Great!
My psychic powers are good today... I guessed it even before I saw your site.

Since Genesis 2, they've loved those CSS3 transitions. They're everywhere! And I like them too - except in situations like yours, where links get messed up. The first place I noticed it was on a slider - you know, the ones where if you hover over the slider, the arrow links appear. The problem is that the arrow hover might make this Huge Awkward Move if you have a transition on it. And if you're not familiar with this, you'll blame the plugin. 🙂

So I usually leave it on for the other stuff, but often kill it for links.

Your site is very stylish! Super job, and I'm glad I was able to help.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts