Досить часта практика на сучасних сайтах - плавне збільшення блоку з зображенням. Як же це зробити за допомогою CSS?
Плавне збільшення зображення при наведенні курсору CSS
Ділимо рішення задачі на два етапи: розмітка html і стилі css. Для початку розмітимо блоки з зображеннями всередині:
Всім блокам присвоїли клас box. Одним з важливих його властивостей буде overflow: hidden, тобто приховати все, що виходить за рамки блоку. Будемо ж збільшувати зображення? Так. Але видима буде тільки частина, обмежена блоком.
Це ми розібрали. Переходимо до опису стилів.
Box (
overflow: hidden;
width: 250px;
height: 250px;
}
Все як і обмовляли - квадратні блоки, схожі за розміром зі стандартним, що не збільшеним зображенням, то теж 250 на 250.
Властивість overflow: hidden як і говорилося раніше, не дозволити виходити за рамки блоку при збільшенні.
Властивості стосуються зображень:
Box img (
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}
Box img: hover (
-webkit-transform: scale (1.2);
-moz-transform: scale (1.2);
-o-transform: scale (1.2);
transform: scale (1.2);
}
Тут без CSS3 нікуди. Всі сучасні браузери анімацію відобразять. Потрібні параметри transition і transform. Час на анімацію виставляємо 1 секунду (1s). Збільшення відбуватиметься в 1.2 рази. Ви можете змінити на Ваш смак.
Тепер наприклад роботи!
Цей прийом з картинками я використовую у себе на блозі. Коли користувач наводить на мініатюру будь-якого запису вона плавно збільшується. Погодьтеся, досить не погано і красиво виглядає.
І робиться це тільки за допомогою CSS3, і досить таки просто. Зараз я Вам розповім як це робити.
Як це працює Ви можете подивитися в демо і у мене на блозі на головній сторінці.
Плавне збільшення картинки при наведенні тільки на CSS3.
Html
Для початку нам потрібно підготувати не складну розмітку html для наших картинок, в даному випадку у нас їх буде 3.
Як бачите, що все картинки мають клас image до якого ми, власне, і будемо задавати параметри.
CSS
А ось як виглядають стилі:
Image (overflow: hidden; width: 380px; height: 250px;)
Ми створили звичайний блок розміром 380 на 250 пікселів. Це блок повинен бути такого ж розміру як і зображення (в нашому випадку 380 на 250). Відповідно, якщо у Вас картинка буде більшого або меншого розміру, розмір блока.image робимо такого ж розміру як і картинка.
І обов'язково ставимо правило overflow: hidden; Воно потрібне для того, щоб наше зображення не виходило за рамки блоку при збільшенні.
Тепер задаємо правила для самих зображень:
Image img (-moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out;) .image img: hover (-webkit-transform: scale ( 1.1); -moz-transform: scale (1.1); -o-transform: scale (1.1);)
Анімація відбувається за допомогою параметра в CSS3. На всю анімацію у нас йде одна секунда. Якщо Ви хочете, щоб картинка швидше збільшувалася, зменшіть це значення.
У демо картинка збільшується 1.1 рази. Якщо поставити значення 2, то картинка збільшиться в два рази і так далі.
Ось і все, друзі. Як і обіцяв, що урок буде дуже простим. Сподіваюся Вам сподобався цей простий ефект для картинок. До зустрічі.
Ефект збільшення зображення при наведенні курсору миші відомий багатьом. Але як зробити так, щоб збільшувалася тільки фонове зображення (background-image) без збільшення основного вмісту блочного елемента?
Содадім блоковий елемент з шириною 340 точок, а висотою 230 точок.
Для нього вкажемо стиль:
Vozm (
width: 340px;
height: 230px;
float: left;
overflow: hidden;
}
Вирівнюємо по лівому краю - float: left. Також зазначаємо властивість overflow із значенням hidden для того, щоб фонове зображення не виходило за область нашого блоку.
На наступному етапі поміщаємо вміст в наш блоковий елемент:
текст 1
Vozm p (
color: # da291c;
font-weight: bold;
font-size: 16px;
line-height: 21px;
}
.vozm .red_bl (
width: 30px;
height: 6px;
background-color: # da291c;
}
Вказуємо колір тексту для абзаців у блочному елементі - color зі значенням # da291c. Також наголошуємо на тому, що текст буде напівжирний з розміром (font-size) 16 пікселів і міжрядковим інтервалом (line-height) в 21 піксель.
Стиль "red_bl" додасть гарний горизонтальний елемент червоного кольору в наш блоковий контейнер. Ширина 30 точок, висота 6 точок, колір такий же як і у тексту.
Також додаємо стиль для внутрішнього блоку:
Vposf (
position: relative;
z-index: 9999;
left: 45px;
top: 40px;
}
Вказуємо відносне положення внутрішнього блоку з внутрішніми відступами зліва 45 точок і зверху 40 точок.
Додаємо фонове зображення background-image:
Стиль для нього виглядає наступним чином:
Child (
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
Властивість transition для різних браузерів використовується для того, щоб ефект збільшення зображення фону при наведенні відбувався плавно протягом 50 мілісекунд. Ширину і висоту вказуємо рівною 100%. Також позицію фону (background-position) ставимо в центрі і шасштабіруем зображення (background-size) по ширині і висоті блоку.
Vozm: hover .child,
.vozm: focus .child (
-ms-transform: scale (1.2);
-moz-transform: scale (1.2);
-o-transform: scale (1.2);
transform: scale (1.2);
}
Для цього використовується властивість transform cсо значенням scale. Збільшення виробляємо на 20% від початкового.
Ну і довантажувати сам фон:
Bg-1 (background-image: url ( "/ userf_fs / stati / fon_sh.jpg"); margin-top: -59px;)
Так як блоковий елемент з фоновим зображенням знаходиться нижче нашого тексту, то його необхідно підняти. Для цього використовуємо від'ємне значення для властивості margin-top.
Отже, html код виглядає наступним чином:
текст 1
А css наступним чином:
Vozm (
width: 340px;
height: 230px;
float: left;
overflow: hidden;
}
.child (
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.vozm: hover .child,
.vozm: focus .child (
-ms-transform: scale (1.2);
-moz-transform: scale (1.2);
-webkit-transform: scale (1.2);
-o-transform: scale (1.2);
transform: scale (1.2);
}
.vozm p (
color: # da291c;
font-weight: bold;
font-size: 16px;
line-height: 21px;
}
.vozm .red_bl (
width: 30px;
height: 6px;
background-color: # da291c;
}
..jpg "); margin-top: -59px;)
.vposf (
position: relative;
z-index: 9999;
left: 45px;
top: 40px;
}
Якщо помістимо кілька блокових елементів відносно один одного, то отримаємо наступне зображення.
Отже, ми досягли бажаного результату.
Привіт, дорогі читачі. Думала, я думала і вирішила написати статтю як красиво збільшити фотографії при наведенні на неї курсором мишки.
Радості моїй не було меж, і не тому що цікава фішка, і не тому що дитинство в одному місці грає :) Хочу сказати, що такого ефекту я не очікувала.
Блогер я новенький, молодий, початківець. Офісними програмами користуватися практично не вміла, не кажучи вже про фотошопі. Блог створила, а виявилося що вчитися потрібно було з самих низів. Чайник чайником. Все що я вміла це зробити скріншот в програмі Paint.
Смію зауважити, що дивитися на мої скріншоти без сліз не можна було. Але несподівано, коли експериментувала і додала гаджет в блог, мої фотографії заграли, засяяли, заблищали яскравим кольором, вони немов ожили і почали іншу нове життя, в них додалося контрастність.
Ефект плавного збільшення картинок буде у всіх зображень в блозі. Картинки не збільшуються на весь екран, а плавно висуваються і оживають. Справжній 3Д ефект.
Як встановити гаджет «Плавне збільшення картинки при наведенні курсору» в Blogger
Плавне збільшення картинки при наведенні курсору мишіКод встановлюється як звичайний гаджет HTML / JavaScript в будь-якому місці. Статтю «» можна почитати в моєму блозі.
