Match size and scale of fullsize image to SVG viewbox - html

Question

I have a list of team members. Each member element consists of an image cropped in a circle inside white box. When you hover on the box, the image changes to fullsize. It was inspired by this website:
I achieve this same animation with SVGs. However, in the website above, each image is exactly 300X350 - the same size as the white container box. This creates a flawless transition from masked image to fullsize image - nothing appears to jump or move. On the other hand, my images are a variety of sizes. As a result, the visible portion of the SVG is either zoomed in or out the image, and when you hover, the full image appears to jump:
How can I get the scale and size of fullsize image to match that in the SVG view box, such that it doesn't appear to move?
JSFiddle: http://jsfiddle.net/mzechar/afnxkt2h/2/
html:
<li>
<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="team/finishedBW/CCK.jpg__.jpg" clip-path="url(#circle)"/>
</svg>
</div>
<!-- The full revealed image -->
<img class="img-full" src="team/finishedBW/CCK.jpg__.jpg" 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="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
CSS:
.team-listing{
position:relative;
margin-top:40px;
margin-right:auto;
margin-left:auto;
}
.team-listing li{
display:inline-block;
overflow: hidden;
float:left;
height: 340px;
list-style-position:inside;
margin: 1px 1px 1px 1px;
background-color:#fff;
}
.team-listing ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: row;
flex-flow: row wrap;
flex-shrink: 1;
flex-grow: 1;
float: left;
min-width: 0;
max-width: 100%;
position: relative;
filter: drop-shadow(5px 5px 5px rgba(2,2,22,0.1));
}
a {
display: inline-block;
}
article {
position: relative;
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: rgba(0, 255, 255, .2);
z-index: 3;
}
/* place full image above SVG */
.img-full {
position: absolute;
top: 0;
right: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 {
position:absolute;
display: block;
}
a:hover .circle-ring {
opacity: 1;
transform: scale(1);
}
.bio {
position: absolute;
bottom: 0;
padding: 1rem 2rem;
color: #000;
/* keep text above SVG, full image and overlay */
z-index: 4;
}
a:hover .bio {
color: #FFF;
}
/* general */
h2,
h4 {
margin: 0;
font-family: sans-serif;
}
h4 {
font-weight: 300;
}

Answer 1

Have confidence in SVG content. There is no need to define two <svg> elements and a HTML <img> inbetween. Just position the image in an <image> tag inside one <svg> parent, and set/remove the clip path depending on hover state.
The clip path itself remains in a separate, but hidden <svg> so it can be reused for multiple images.
If both the image dimensions and their position so they show the right clipped content differ, it is probably better not to depend on preserveAspectRatio, but to set them absolutely. (Setting overflow:hidden on the <svg> element is more of a precaution, since the spec has changed a bit whether that is the default.)
a {
display: inline-block;
}
article {
position: relative;
width: 300px;
height: 350px;
overflow: hidden;
}
article::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
background: rgba(0, 255, 255, .2);
z-index: 3;
}
.portrait {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.portrait image {
clip-path: url(#circle);
}
a:hover .portrait image {
clip-path: none;
}
a:hover article:after {
position: absolute;
display: block;
}
.ring {
fill: none;
stroke: white;
stroke-width: 1;
opacity: 0;
transform-origin: 50% 50%;
transform: scale(1.8);
transition: transform .3s ease, opacity .4s ease;
}
a:hover .ring {
opacity: 1;
transform: scale(1);
}
.bio {
position: absolute;
bottom: 0;
padding: 1rem 2rem;
color: #000;
}
h2 {
font-size: 1.5em;
font-weight: bold;
}
h4 {
font-weight: 300;
}
h2, h4 {
margin: 0;
font-family: sans-serif;
}
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"/>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="400" height="300" x="-100" y="0"
xlink:href="http://api.leafsnap.com/v1/team/images/columbia/Neeraj.jpg?h=300"/>
<circle class="ring" cx="150" cy="150" r="100" />
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>

Answer 2

Crop your images, throw out those useless tags and use every image only once.
Hope this helps:
section.team {
margin: auto;
background: #fefefe;
}
.team-listing {
position: relative;
margin: 40px auto 0;
display: flex;
filter: drop-shadow(5px 5px 5px rgba(2, 2, 22, 0.1));
}
.team-listing li {
overflow: hidden;
height: 350px;
list-style: none;
margin: 1px;
background-color: #fff;
}
article {
position: relative;
top: 0;
width: 300px;
height: 300px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.img-full {
-webkit-clip-path: circle(30% at 50% 50%);
clip-path: circle(30% at 50% 50%);
width: 500px;
}
a:hover .img-full {
-webkit-clip-path: none;
clip-path: none;
filter: sepia(100%);
}
.circle-ring {
position: absolute;
top: 0;
z-index: 3;
opacity: 0;
transform-origin: 50% 50%;
transform: scale(1.8);
transition: transform 0.3s ease, opacity 0.4s ease;
}
a:hover .circle-ring {
opacity: 1;
transform: scale(1);
}
.bio {
position: absolute;
bottom: 0;
margin: 2rem;
color: #000;
}
a:hover .bio > h2 {
color: #fff;
}
h2,
h4 {
margin: 0;
font-family: sans-serif;
}
h4 {
font-weight: 300;
}
<section class="content-wrapper team">
<ul class="team-listing">
<li>
<a href="#">
<article>
<img class="img-full" src="https://i.imgur.com/6eRLJ4I.jpg" alt="">
<svg viewBox="0 0 100 100" class="circle-ring">
<circle cx="50" cy="50" r="35" stroke="white" stroke-width=".5" fill="transparent" />
</svg>
</article>
<div class="bio">
<h2>Article Title</h2>
<h4>Article Subtitle</h4>
</div>
</a>
</li>
<li>
<a href="#">
<article>
<img class="img-full" src="https://i.imgur.com/6eRLJ4I.jpg" alt="">
<svg viewBox="0 0 100 100" class="circle-ring">
<circle cx="50" cy="50" r="35" stroke="white" stroke-width=".5" fill="transparent" />
</svg>
</article>
<div class="bio">
<h2>Article Title</h2>
<h4>Article Subtitle</h4>
</div>
</a>
</li>
</ul>
</section>