/* Контейнер, в котором размещаем изображение */
 
.box-thumb {
    width: 100%;
    max-width: 648px; /* отзывчивые размеры  (опционально) */
    margin: 0 auto; /* распологаем по центру */
    padding: 0;
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer;
}
/* 
 * Стили изображения внутри 
 * родительского контейнера 
*/
.box-thumb img {
    max-width: 100%;
    height: auto;
    display: block;
/* трансформация - реальный масштаб картинки */
    -webkit-transform: scale(1);
    transform: scale(1);
/* время исполнения трансформации */
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}
/*
 * Масштабируем изображение с помощью 
 * трансформации  при наведении 
*/
.box-thumb:hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
 
/* Воспроизведём  эффект наклонного блика */
.box-thumb::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
/*
 * используем линейный градиент 
 * определим начальное и конечное расположение,
 * цвет, размер и элементы трансформации
*/
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
/* Создадим анимацию и установим время исполнения */
.box-thumb:hover::before {
    -webkit-animation: shine .85s;
    animation: shine .85s;
}
/*
 * описываем анимацию CSS свойств 
 * в виде перечня ключевых кадров 
*/
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
 
@keyframes shine {
    100% {
        left: 125%;
    }
}
/* Формирум блок с подписью к изображению */
.box-thumb p.descript {
    position: absolute;
    bottom: 10px;
    right: 0;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.5em;
    font: 300 0.875rem/140% 'Exo 2', Tahoma, Verdana, Segoe, sans-serif;
/* Изначально скрыта */
    opacity: 0;
/* Устанавливаем плавный переход между двумя состояниями элемента */
    -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: opacity 0.7s, transform 0.7s;
/* Используем трансформации */
    -webkit-transform: scale3d(0.9, 0.9, 1);
    transform: scale3d(0.9, 0.9, 1);
    -webkit-transform: translate3d(-180%, 0, 0);
    transform: translate3d(-180%, 0, 0);
    visibility: visible;
}
/* Изменения состояния элемента (подписи) при наведении на изображение */
.box-thumb:hover p.descript {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);