Intereting Posts
Как я могу минимизировать css-файлы @import с помощью wp-minify? Как восстановить удаленные сообщения не в корзине Добавить Featured Image и Title в пункты wp_nav_menu put_contents не удается, но fopen в скрипте оболочки отлично работает Сайт только для пользователей, прошедших аутентификацию с помощью другого приложения PHP Как фильтровать содержимое боковой панели Добавление пользовательских данных в существующий user_id Как сделать отзывчивую галерею wp default? обновить идентификатор термина (сохраненный как пост-мета-значение) при экспорте / импорте сообщений Перенаправление на другую страницу, если пользователь вошел в систему при повторном нажатии кнопки входа в строку меню WordPress add_admin_page не работает, даже параметры правильные? Как я могу показать пустую корзину WooCommerce? Как я могу сделать свои избранные списки внутри категории, чтобы показывать первую, а другие не отображаемые списки случайным образом после index.php всегда отображается перед любым файлом в URL-адресе Звуковой код shortclode не работает

Как создать галерею, показывающую эффект Кена Бернса, когда мышь наводится на образы?

Любой плагин или даже код будут отличными. Мы ценим любые предложения.

Прежде всего: попробуйте быть более конкретным. Многие люди могут знать, что такое эффект Кена Бернса, другие могут не знать, что речь идет о панорамировании и масштабировании изображения.

Тем не менее, вы можете добиться этого эффекта только с помощью CSS, используя свойство transform . Подробнее о transform: scale на css-tricks.com и здесь – это рабочий фрагмент кода codepen.io, масштабирующий фоновое изображение при наведении так:

HTML:

 <div class="image-box"> <div class="image"> </div> </div> 

CSS:

 .image-box{ width:300px; overflow:hidden; } .image { width:300px; height:200px; background: url("http://lorempixel.com/300/200"); background-position:center; transition: all 1s ease; } .image:hover { transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ } 

Затем вы также можете изменить положение фонового изображения по своему усмотрению. Это, однако, вам нужно будет применить к каждому изображению индивидуально, если вы хотите масштабировать / панорамировать в другую область изображения. Надеюсь, это поможет начать …