• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 491
  • Last Modified:

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

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 6
  • 4
1 Solution
 
LZ1Commented:
You could just use those images as backgrounds in those circles. Then you would have to use the -webkit-background-clip property.  Should be an easy fix like that.
0
 
catonthecouchproductionsAuthor Commented:
Would they behave the same as FF then? Did you see how they behave in FF?

Ryan
0
 
LZ1Commented:
Yep. They look great in FF.  I personally would do it that way. Less HTML markup and easier to tame using CSS
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
catonthecouchproductionsAuthor Commented:
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.

0
 
LZ1Commented:
No problem at all.  We've all done that. lol
0
 
catonthecouchproductionsAuthor Commented:
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.

0
 
catonthecouchproductionsAuthor Commented:
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;


}

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
Weird, I removed float:left and bingo bango!
0
 
LZ1Commented:
Glad you got it!! Site looks nice btw
0
 
catonthecouchproductionsAuthor Commented:
Thanks, appreciate man. Quick landing page while I build the full one
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now