HTML+CSS

<style>
.blok {
font-family: 'Playfair Display', serif;
margin: 0;
text-align: center
}
.box1 {
display: inline-block;
width: 49%;
background: #000; /* У блока, оборачивающего фотографию при наведении будет просвечивать черный фон */
overflow: hidden; /* Ограничиваем видимую область */
}
.box2 {
display: inline-block;
width: 49%;
background: #fff; /* У блока, оборачивающего фотографию при наведении будет просвечивать белый фон */
overflow: hidden; /* Ограничиваем видимую область */
}
img{
transition: .5s ease-in-out; /* Плавное изменение прозрачности и увеличения */
display: block; /* Убираем полосу под фотографей */
}
.img1 {width: 100%; display: block;}
.img1:hover {opacity: 0.5; transform: scale(1.05); /* Увеличение фотографии */}
</style>

<div class="blok">
<a href="#">
<div class="box1">
<img class="img1" src="/images/css3-filters.jpg"></div>
</a>
<a href="#">
<div class="box2">
<img class="img1" src="/images/css3-filters.jpg"></div>
</a>
</div>