圆形作物到悬停时的圆形边界 [英] circular crop to circular border on hover
本文介绍了圆形作物到悬停时的圆形边界的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个无序列表显示为表格.每个列表元素都包含一个图像和一个名称/标题.图像被裁剪为一个圆圈.悬停时，我希望圆形的裁剪成为图像周围的圆形边框，这样我们就可以看到整个图像，并在脸上有一个圆圈.我的灵感来自此网站:
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:
我已成功将图像裁剪为一个圆圈，但是在悬停边框时遇到了麻烦. 您可以在此处查看我的 JSFiddle
I have successfully cropped the image to a circle, but I am having trouble with the border on hover. You can view my JSFiddle here
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>
推荐答案
您可以使用SVG蒙版创建初始的圆形图像.悬停时，在其上放置标准图像.
You could use an SVG mask to create the initial circle-shaped image. On hover, place a standard image over it.
对于动画圆环，您也可以使用SVG.
For the animating circle ring, you can also use an SVG.
示例，带有注释:
a {
display: inline-block;
}
article {
position: relative;
border: 1px solid lightgrey;
width: 300px;
height: 350px;
/* prevent scaled circle ring from triggering hover */
overflow: hidden;
}
/* create the colour overlay */
article:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 255, 255, 0.15) 0%, rgba(0, 255, 255, 1) 100%);
z-index: 3;
}
/* place full image above SVG */
.img-full {
position: absolute;
top: 0;
z-index: 2;
/* hide the full image initially */
display: none;
}
.circle-ring {
position: absolute;
top: 0;
z-index: 3;
/* initially hidden with opacity so it can be animated */
opacity: 0;
transform-origin: 50% 50%;
transform: scale(1.8);
transition: transform .3s ease, opacity .4s ease;
}
a:hover .img-full,
a:hover article:after {
display: block;
}
a:hover .circle-ring {
opacity: 1;
transform: scale(1);
}
.text {
position: absolute;
bottom: 0;
padding: 1rem 2rem;
color: #000;
/* keep text above SVG, full image and overlay */
z-index: 4;
}
a:hover .text {
color: #FFF;
}
/* general */
h2,
h4 {
margin: 0;
font-family: sans-serif;
}
h4 {
font-weight: 300;
}
<a href="#">
<article>
<div>
<!-- The masked image -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<defs>
<clipPath id="circle">
<circle cx="50" cy="50" r="35"/>
</clipPath>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="https://source.unsplash.com/Nxy-6QwGMzA/300x350" clip-path="url(#circle)"/>
</svg>
</div>
<!-- The full revealed image -->
<img class="img-full" src="https://source.unsplash.com/Nxy-6QwGMzA/300x350" alt="">
<!-- The circle ring -->
<svg viewBox="0 0 100 100" class="circle-ring">
<circle cx="50" cy="50" r="35" stroke="white" stroke-width=".5" fill="transparent" />
</svg>
<div class="text">
<h2>Article Title</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
这篇关于圆形作物到悬停时的圆形边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
