I have an unordered list displayed as a table. Each list element contains an image and a name/title. The image is cropped to a circle. On hover, I would like the circular crop to become a circular border around the image, such that we see the full image with a circle around the face. My inspiration is from this site https://360i.com/about/:
我已成功将图像裁剪为圆形，但悬停时边框出现问题。 你可以查看我的JSF 在这里 http://jsfiddle.net/mzechar/em5yh164/
section.team {
margin: auto;
background: #FEFEFE;
display: inline-block;
}
.team-listing {
position: relative;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
}
.team-listing li {
display: inline-block;
width: 300px;
overflow: hidden;
float: left;
height: 340px;
list-style-position: inside;
margin: 1px 1px 1px 1px;
background-color: #fff;
}
.team-listing ul {
display: table;
list-style: none;
filter: drop-shadow(5px 5px 5px rgba(2, 2, 22, 0.1));
white-space: nowrap;
width: 80%;
margin: auto;
}
.circle-image-crop {
background-color: transparent;
width: 220px;
height: 220px;
position: relative;
display: block;
overflow: hidden;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.circle-image-crop::after {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: none;
content: ' ';
background: -moz-radial-gradient(center, ellipse cover, rgba(190, 232, 114, 0.15) 0%, rgba(66, 147, 33, 1) 100%);
/* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(190, 232, 114, 0.15)), color-stop(100%, rgba(66, 147, 33, 1)));
/* safari4+,chrome */
background: -webkit-radial-gradient(center, ellipse cover, rgba(190, 232, 114, 0.15) 0%, rgba(66, 147, 33, 1) 100%);
/* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(190, 232, 114, 0.15) 0%, rgba(66, 147, 33, 1) 100%);
/* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(190, 232, 114, 0.15) 0%, rgba(66, 147, 33, 1) 100%);
/* ie10+ */
background: radial-gradient(ellipse at center, rgba(190, 232, 114, 0.15) 0%, rgba(66, 147, 33, 1) 100%);
/* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BEE872', endColorstr='#429321', GradientType=1);
/* ie6-9 */
border-radius: 50%;
border: 1px #fff;
background-color: transparent;
}
.circle-image-crop:hover::after {
display: block;
}
/* this is where I tried to create the circular border*/
.circle-image-crop:hover {
border-radius: 50%;
border: 1px #fff;
background-color: transparent;
}
.circle-image-crop img {
display: inline;
margin: 0 auto;
height: 100%;
width: auto;
}<section class="content-wrapper team">
<h3>Columbia</h3>
<div class="team-listing">
<ul>
<section class="content-wrapper team">
<h3>Columbia</h3>
<div class="team-listing">
<ul>
<li>
<div class="team-member-listing-wrapper">
<div class="circle-image-crop">
<img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
</div>
Jane Jam
<br>
<span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class="team-member-listing-wrapper">
<div class="circle-image-crop">
<img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
</div>
Jane Jam
<br>
<span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class="team-member-listing-wrapper">
<div class="circle-image-crop">
<img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
</div>
Jane Jam
<br>
<span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class="team-member-listing-wrapper">
<div class="circle-image-crop">
<img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
</div>
Jane Jam
<br>
<span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class="team-member-listing-wrapper">
<div class="circle-image-crop">
<img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
</div>
Jane Jam
<br>
<span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
<li>
<div class="team-member-listing-wrapper">
<div class="circle-image-crop">
<img class="team-member-photo" src="http://api.leafsnap.com/v1/team/images/columbia/Peter.jpg">
</div>
Jane Jam
<br>
<span class="bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
</div>
</li>
</ul>
</div>
</section>这是使用径向渐变的一个简单想法：
.box {
width:200px;
height:200px;
margin:50px;
border:1px solid;
background-image:
radial-gradient(circle at 100px 80px,transparent 38%,#fff 41%),
url(https://picsum.photos/200/200?image=1069);
background-size:100% 100%,cover;
position:relative;
transition:all 1s;
}
/*The border */
.box:before {
content:"";
position:absolute;
top:16px;
width:62%;
height:62%;
left:50%;
transform:translateX(-50%);
border:2px solid #fff;
border-radius:50%;
}
.box:hover {
background-size:300% 300%,cover;
}<div class="box">
</div>这是另一个使用的想法box-shadow对于不同的动画：
.box {
width:200px;
height:200px;
margin:50px;
border:1px solid;
background-image: url(https://picsum.photos/200/200?image=1069);
position:relative;
overflow:hidden;
}
/*The border */
.box:before {
content:"";
position:absolute;
top:16px;
width:62%;
height:62%;
left:50%;
transform:translateX(-50%);
border:2px solid #fff;
box-shadow:0px 0px 200px 200px #fff;
border-radius:50%;
transition:all 1s;
}
.box:hover::before{
box-shadow:0px 0px 0px 0px #fff;
}<div class="box">
</div>