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:

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>

回答1:

You could use an SVG mask to create the initial circle-shaped image. On hover, place a standard image over it.

For the animating circle ring, you can also use an SVG.

jsfiddle

Example, with comments:

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>

回答2:

Here is a simple idea using radial-gradient:

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

Here is another idea using box-shadow for a different animation:

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

回答3:

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

If you wanted to literally recreate your reference code, you can try setting the width of the image to 300px (the width of the container) and absolute-positioning it to the left. (See CloudApp Gif)

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

Also, don't forget to set the border style to solid (or whatever you would like it to be) ;-)