Overflow hidden - border-radius and image - webkit only
I am working on this site: http://goo.gl/Z6OIp - and if you look in Firefox it behaves correctly, then if you open this in Chrome or Safari, it doesnt clip my images within my circles? Any ideas?
I am on a mac. I found some stuff on stackoverflow but nothing directly related.
Ryan
I am on a mac. I found some stuff on stackoverflow but nothing directly related.
Ryan
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Yep. They look great in FF. I personally would do it that way. Less HTML markup and easier to tame using CSS
True! Will try that out and need to close the other question you helped me with. I forgot to hit submit the other day and closed the tab.
No problem at all. We've all done that. lol
Check it out now: http://goo.gl/Z6OIp - works perfectly! But Seems that my :hover isnt taking place. I have a width and height set as well.
Code:
.work_item{
border:5px solid #bf3604;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
width:150px;
height: 150px;
position: relative;
float: left;
-webkit-background-clip: content;
-moz-background-clip: content;
background-clip: content;
-webkit-transition:width 0.2s ease-in-out,height 0.2s ease-in-out,margin 0.2s ease-in-out;
-moz-transition:width 0.2s ease-in-out,height 0.2s ease-in-out,margin 0.2s ease-in-out;
transition:width 0.2s ease-in-out,height 0.2s ease-in-out,margin 0.2s ease-in-out;
overflow: hidden;
}
#stache{
background: url(../images/work/moustache.jpg) no-repeat 0 0 transparent;
}
#brr{
background: url(../images/work/brr.jpg) no-repeat 0 0 transparent;
}
#blaze{
background: url(../images/work/blaze.jpg) no-repeat 0 0 transparent;
}
.work_item:hover{
border:5px solid #bf3604;
width:170px;
height: 170px;
cursor: pointer;
margin:-10px 0 0 -10px;
}
.work_item:active{
border:5px solid #a1360f;
width:185px;
height: 185px;
position: static;
z-index: 999;
margin:-17px 0 0 -17px;
}
Weird, I removed float:left and bingo bango!
Glad you got it!! Site looks nice btw
Thanks, appreciate man. Quick landing page while I build the full one
ASKER
Ryan