hover時に画像部分だけ色を変えたい

画像にマウスを持っていくと、画像部分だけ色を変えたいのですが、画像を飛び出して色が変わってしまいます。検証でチェックするとimg部分は写真部分より大きくなっています。
画像部分だけ色を変えるにはどうすれば良いでしょうか？

<!DOCTYPE html>
<head>
<meata lang="ja">
<meta charset="utf-8">
<style>
.picture{
  float:left;
  width:33.333%;
  transform: translate(0,40px); 
  -webkit-transform: translate(0,40px);
  transition:0.8s;
}
/*hoverした時に表れる*/
.picture .mask{
  width:100%;
  position:absolute;
  overflow: hidden;
  top:0;
  bottom:0;
}
.picture img{
  position:relative;
  cursor: pointer;
  height:200px;
  display: block;
  margin:0 auto;
  transition: max-height 0.4s;
}
.picture h2{
  text-align: center;
  font-size: 20px;
  font-family: arial-black;
  color:#fff;
  position:relative;
}
.picture-view .mask{
  opacity:0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.picture-view:hover .mask{
  opacity:0.8;
}
</style>
</head>
<body>
<div class="main">
    <div class="picture picture-view">
      <img src="http://s3.amazonaws.com/iexplore_web/images/assets/000/006/463/original/sweden.jpg?1443530953"/>
      <div class="mask">
        <h2>City view</h2>
      </div>  
    </div>
    <div class="picture picture-view">
      <img src="http://331mrnu3ylm2k3db3s1xd1hg.wpengine.netdna-cdn.com/wp-content/uploads/2015/06/Sprudge-FIKANYC-RobertWolcheck-FIKA_NYC_coffee_cup_detail-1.jpg"/>
      <div class="mask">
        <h2>Fika</h2>
      </div>
    </div>
    <div class="picture picture-view">
      <img src="http://blogg.forskolankarten.se/wp-content/uploads/2014/03/skogen.jpg">
      <div class="mask"/>
        <h2>Utflykt</h2>
      </div>
    </div>
  </div>      
</body>

pictureとmaskのwidthとheightを設定すればできますが、ブラウザを縮めてもデザインが崩れないようにしたいのでwidth33.33333%を使っています。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか。

CSS
1.picture {
2    overflow: hidden;
3}
4```**動くサンプル：**[https://jsfiddle.net/qwc4p9Ln/](https://jsfiddle.net/qwc4p9Ln/)
5
6
7---
8
9**追記：**
10
11画像が「横幅いっぱい」を基準に作られていないのがそもそもの問題な気もしますが。
12
13```CSS
14.picture img {
15    object-fit: cover;
16    width: 100%;
17}
18```**動くサンプル：**[https://jsfiddle.net/qwc4p9Ln/1/](https://jsfiddle.net/qwc4p9Ln/1/)
19
20【Can I use... Support tables for HTML5, CSS3, etc】
21[http://caniuse.com/#search=object-fit](http://caniuse.com/#search=object-fit)
22