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 100px80px,transparent 38%,#fff41%),
  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;
}

<divclass="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:0px0px200px200px#fff;
  border-radius:50%;
  transition:all 1s;
}
.box:hover::before{
  box-shadow:0px0px0px0px#fff;
}

<divclass="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:hoverarticle:after {
  display: block;
}

a:hover.circle-ring {
  opacity: 1;
  transform: scale(1);
}

.text {
  position: absolute;
  bottom: 0;
  padding: 1rem2rem;
  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;
}

<ahref="#"><article><div><!-- The masked image --><svgxmlns="http://www.w3.org/2000/svg"version="1.1"viewBox="0 0 100 100"><defs><clipPathid="circle"><circlecx="50"cy="50"r="35"/></clipPath></defs><imagewidth="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 --><imgclass="img-full"src="https://source.unsplash.com/Nxy-6QwGMzA/300x350"alt=""><!-- The circle ring --><svgviewBox="0 0 100 100"class="circle-ring"><circlecx="50"cy="50"r="35"stroke="white"stroke-width=".5"fill="transparent" /></svg><divclass="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-cropimg{
    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) ;-)