代码之家 › 专栏 › 技术社区 › maddie

悬停时圆形裁剪到圆形边框

crop border css html

maddie · 技术社区 · 6 年前

我有一张无序的表。每个list元素都包含一个图像和一个名称/标题。图像被裁剪成圆形。在悬停时,我希望圆形裁剪成为图像周围的圆形边框,这样我们就可以看到整个图像的面周围有一个圆形。我的灵感来自 this site :

我已经成功地将图像裁剪成一个圆,但是在悬停时边界有问题。你可以看我的 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>

3 回复 | 直到 6 年前

sol 6 年前

可以使用svg掩码创建初始圆形图像。悬停时,在其上放置一个标准图像。

对于设置圆环动画,也可以使用SVG。

jsfiddle

示例,带注释:

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>

Temani Afif 6 年前

下面是一个使用径向渐变的简单想法:

.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”>

&L/DIV & GT;

arborvitae 6 年前

http://jsfiddle.net/vemwjp2o/28/

如果你想重新创建你的参考代码,你可以尝试将图像的宽度设置为300 px(容器的宽度),并将其绝对定位到左边。 (See CloudApp Gif)

.circle-image-crop img{
    display: inline;
    position: absolute;
    margin: 0 auto;
    width: 300px;
    top: -20px;
    left: -40px;
}

另外,不要忘了将边框样式设置为solid(或任何您希望的样式);-)