Responsive image and blurred effect issue - html

Question

First issue
I have photo gallery on my page. If you click on photo you can see larger preview. Because I need to deal with mobile phones so I set:
.overview img {
height: auto;
width: 90%;
}
But I have problem. img height exceeds height of .overview.I need to cut off ends of img or some other way to solve problem.
PEN - http://codepen.io/marekkobida/pen/yOPeXO
HTML:
<div class="dark" id="photo-gallery">
<div class="container">
<h1>A</h1>
<p>B</p>
<div class="photos">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
<div class="overview">
<img src="">
</div>
</div>
</div>
CSS:
.container {
margin-left: auto;
margin-right: auto;
padding: 8rem 1.25rem;
text-align: center;
}
#media (min-width: 65rem) {
.container {
width: 60rem;
}
}
#photo-gallery {
position: relative;
}
#photo-gallery .photos {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: -0.625rem;
margin-top: 0.625rem;
}
#photo-gallery .photos > div {
border: 1px solid;
flex: 0 0 210px;
height: 210px;
margin: 0.625rem;
}
#photo-gallery .overview {
align-items: center;
background: #23282d;
display: none;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
}
#photo-gallery .overview img {
height: auto;
width: 90%;
}
Second issue
I want to remove background of .overview and replace it with a blurred effect. (example: filter: blur(5px);)
The problem is that when I apply blurred effect on gallery that .overview is blurry too.

Answer 1

Your first issue can be solved by giving max-height: 100% to the img
#photo-gallery .overview img {
height: auto;
width: 90%;
max-height: 100%;
}
see this PEN
for the second question,
When using the blur or opacity property, it is not possible to ignore
the child element. If you apply either of those properties to parent
element, it will automatically apply to child elements too.
You have to go for alternate solutions,
see this How to blur(css) div without blur child element