.services {
width: 218px;
float: left;
margin-right: 29px;
}
.services img {
border: solid 8px #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.services a img:hover {
border: solid 8px #333;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
}
The image is square 218px x 218px, so I’m guessin that has something to do with it, but I wanted it like that so it would look decent enough in older browsers that don’t support border radius.
Here is what it looks like in Safari -
It’s probably something simple, but I’m still stuck on this.
Thanks for that ralph. I have edited my code, but am on a PC running XP and Safari v 3.1 (which shows up as square), so won’t be able to check myself til I go home (another 4 hours).