Overflow Hidden Not working correctly with radius border

Question

I am trying to create a nice hover effect for a my project i am working on and the overflow hidden doesn't seem to be working in safari Take a look. learn.michaelscimeca.com

HTML:

<div class="thumnnail"> <img class="mainbg" src="img/shoppee.jpg" alt=""> <div class="textbox"> <img src="/img/eye.png" alt=""> <span class="launch"><a href="http://www.shoppedelee.com">View Project</a></span> </div> </div>

CSS:

.thumnnail .textbox .launch a { margin-left: -78px; text-align: center; margin-top: 10px; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 15px 40px; position: absolute; top: 45px; left: 50%; background-color: #1c51c8; border-radius: 100%; text-transform: uppercase; -ms-transition: all .5s ease; /* this is for the animation effect to bring the textbox down to up and up to down */ -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .thumnnail .textbox .launch a:hover { background-color: #093db4; } .thumnnail:hover { border: 10px solid #0d46c8; /* this is to alter the border on rollover */ border-radius: 100%; /* this is to round out the div tag */ /* to get rid of the greyscale on rollover */ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); overflow: hidden! important; } .thumnnail:hover img { /* width:120%; height:120%;*/ } .thumnnail:hover .textbox { height: 100px; }

Generally speaking, it's good practice to provide sample markup and code here, and only reference your site to illustrate the issue as a whole. Otherwise, you're asking others to do a lot of hunting around for you. — Jason M. Batchelor
– Jason M. Batchelor, Commented Aug 12, 2013 at 18:36

urban_raccoons · Accepted Answer · 2013-08-12 18:51:01Z

1

Change your transition from:

transition: all .5s ease;

to:

transition: border .5s ease;

And then post your CSS and HTML so that other people can see what the problem was.

answered Aug 12, 2013 at 18:51

urban_raccoons

3,4971 gold badge25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jason M. Batchelor Over a year ago

Don't know. I'm still seeing an issue in Safari, even after changing the transition to only affect the border. I agree, however... the OP needs to post code.

urban_raccoons Over a year ago

argh yeah I guess I don't really have access to Safari right now - should have paid more attention there.

gilly3 Over a year ago

.thumbnail should transition border-color only, not border-width. It should also transition filter. .textbox should transition height. So: .thumbnail { transition: border-color .5s ease, filter .5s ease; } .textbox { transition: height .5s ease; }

urban_raccoons Over a year ago

Do you want to repost that as your own answer or should I add it to mine?

Kelly Over a year ago

yea I tired all suggestions. Still no luck :(

Collectives™ on Stack Overflow

Overflow Hidden Not working correctly with radius border

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related