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 b

Solution 1:

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>

Solution 2:

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>

Solution 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) ;-)