Make background image to fit in flex container
<p>I have used flexbox to create a grid which allows 3 images be aligned side by side. I have given them a width of 33.333% so they fit exactly.</p>

<p>However now I want to introduce a css hover effect where another image fades in when you hover over an image.</p>

<p>I have the effect working fine, however the issue I am having is that the image which fades in on hover is too big and as a result only about 75% of it appears in the container.</p>

<p>I got the code for the fade effect <a href="http://www.gadgetronicx.com/image-cross-fade-on-hover-css-html" rel="nofollow noreferrer">here</a>, but although I have been manipulating the code I can't get the image to fit exactly 100% in the container. Both images are the exact same dimensions.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1
}

.bord {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
}

.crossfd {
  background: url("https://picsum.photos/200/200?image=0");
  display: inline-block;
  background-size: cover;
}

.crossfd img {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.crossfd img:hover {
  opacity: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="box bord crossfd"&gt;
    &lt;img src="https://picsum.photos/200/300?image=1" width="100%" alt="Lou" /&gt;
  &lt;/div&gt;
  &lt;div class="box bord crossfd"&gt;
    &lt;img src="https://picsum.photos/200/300?image=2" width="100%" alt="Lou" /&gt;
  &lt;/div&gt;
  &lt;div class="box bord crossfd"&gt;
    &lt;img src="https://picsum.photos/200/300?image=3" width="100%" alt="Lou" /&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>