Эффекты при наведении на картинку в CSS3. Галерея картинок с увеличением CSS3

CSS 3 дарит огромное количество эффектов, которые раньше можно было реализовать с помощью программного кода. Рассмотрим основные эффекты по работе с картинками.

Скачать уже полностью готовый эффект данной анимации вы можете ниже

Код данного примера следующий:

<div style="margin-left: 8px; height: 230px;">
<div class="blockimgs"><img alt="" src="https://blogprogram.ru/wp-content/uploads/2014/01/9.jpg" /></div>
<div class="blockimgs"><img alt="" src="https://blogprogram.ru/wp-content/uploads/2014/01/10.jpg" /></div>
<div class="blockimgs"><img alt="" src="https://blogprogram.ru/wp-content/uploads/2014/01/11.jpg" /></div>
</div>

<style>
/* Стиль галереи */
.blockimgs img {
-webkit-transition: all 0.3s ease-out; /* заставляем плавно изменять css св-ва */
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
height: 188px;
width: 177px;
overflow: hidden;
border: 10px solid #fff;
border: 10px solid #eee\9;
-webkit-box-shadow: 2px 3px 10px #6E6E6E;
box-shadow: 2px 3px 10px #6E6E6E;
float: left;
cursor: pointer; }

.blockimgs { display: table-cell; float: left; height: 230; min-height: 180px; width: 212px; }

.blockimgs img:hover {
transform:scale(2); /* увеличиваем картинку при наведении */
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
margin-left: 100px;
margin-top: -60px;
box-shadow: 0 10px 15px rgba(0,0,0,0.5);
z-index: 200; }
</style>