Обновлено 1 сентября 2018 г. SNK

В этом уроке CSS по эффектам наведения изображения мы также увидим, как мы можем использовать CSS для увеличения фонового изображения при наведении курсора и узнать, как увеличить изображение в HTML и CSS3.

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

Мы собираемся реализовать эту функциональность без использования JavaScript или jQuery. Мы собираемся использовать его, используя чистый CSS3, который позволил нам легко достичь многих вещей, которые раньше можно было получить с помощью JavaScript.

CSS3 имеет много дополнительных свойств, некоторые из них: translate, scale, rotate and skew , что помогает преобразовать объект внутри DOM без его изменения и загрузить больше без каких-либо скриптов

давайте приступим,

Что будем делать?

1. Создайте разметку HTML для добавления изображения.
2. Добавьте CSS для стильного внешнего вида.
3. Наконец, добавьте код : hover в CSS для увеличения изображения при наведении.

Шаг 1. Создание HTML-разметки для добавления изображения

Мы всегда используем бутстрап, чтобы упростить задачу и быстро создать элегантный дизайн. Но в этом руководстве это не нужно, мы используем бутстрап только для макетов.

jQuery, отзывчивое масштабирование при наведении указателя мыши + 360-градусный просмотрщик продуктов

Об этом полностью адаптивном масштабировании при наведении курсора мыши

До версии 4.0 этого расширения AJAX-ZOOM увеличения при наведении, оно реагировало только на всплывающее окно. Фактическое «изображение предварительного просмотра» не реагировало. В этой новой версии теперь все работает. Положительный побочный эффект этого изменения заключается в том, что расширение может использовать одно изображение для «изображения предварительного просмотра» и «всплывающего изображения». Однако это дополнительная функция.

Расширение хорошо протестировано в различных браузерах и версиях, включая IE7. Он отлично работает с Bootstrap-CSS и другими библиотеками. Если вы обнаружите какие-либо ошибки, не стесняйтесь сообщать о них. Мы исправим их в первоочередном порядке.

Около 360 ° / 3D поворот

Вращение объектов на 360 ° / 3D не является обязательным! Вам не нужно иметь обзор продукта на 360 ° для каждого элемента в подробном обзоре продукта. Однако, если это имеет смысл, вы можете поместить в галерею более одной камеры 360.

Обзор продукта 360 ° / 3D

Расширение поддерживает «обзоры продуктов» AJAX-ZOOM для 360- и 3D-обзоров продуктов, а также для стандартных изображений продуктов.Вы можете создавать туры с помощью редактора туров продукта AJAX-ZOOM. Его легко использовать, и он интегрирован в бэкэнд большинства плагинов электронной коммерции AJAX-ZOOM. Вы также можете использовать редактор как отдельное приложение, сохраните тур в виде файла XML и свяжите его с объектом конфигурации расширения индивидуально для каждого элемента.

Около 360 ° / 3D горячих точек

Расширение поддерживает горячие точки (интерактивные отметки на изображении). Он поддерживает горячие точки на стандартных изображениях и в 360 / 3D видах.Вы можете создавать и настраивать точки доступа с помощью редактора точек доступа. Этот редактор интегрирован в серверную часть большинства модулей электронной коммерции AJAX-ZOOM. При ручной интеграции вы по-прежнему можете использовать редактор, сохранять горячие точки в файл, а затем ссылаться на этот файл в объекте конфигурации расширения. Горячие точки и «обзор продукта» можно комбинировать. .

О видео

Начиная с версии 5 расширения масштабирования при наведении указателя мыши, он поддерживает добавление видео в галерею с элементами мультимедиа.Вы можете добавлять видео с Youtube, Vimeo и Dailymotion, задав номер идентификатора видео. Кроме того, вы можете добавить, например, Видео в формате mp4, которые отображаются в видеопроигрывателе «videojs» или в собственном видеопроигрывателе браузеров поверх тега HTML5 video. В качестве видео CDN вы можете использовать платный сервис Vimeo, который предлагает потоковое видео в формате mp4 без проигрывателя. Конечно, для этого есть и другие сервисы.

О функции сенсорного пролистывания

Вы можете использовать то же расширение масштабирования при наведении курсора для отображения галереи в виде слайдера с функцией сенсорного пролистывания.Просто переключите одну опцию. Если вы хотите сохранить функцию масштабирования при наведении курсора для настольных компьютеров, но включить ползунок смахивания касанием только на сенсорных устройствах, вы можете сделать это, просто включив опцию noMouseOverZoomTouch. Тем не менее, стандартный зум при наведении курсора отлично работает и на сенсорных устройствах. По умолчанию noMouseOverZoomTouch и mouseOverZoomHybrid включены. Последний обеспечивает возможность сенсорного смахивания вместе с увеличением при наведении курсора.Таким образом, для переключения изображений на рабочих столах пользователи могут смахивать мышью и по-прежнему видеть всплывающее изображение предварительного просмотра после завершения перехода.

О галерее / слайдере миниатюр

Галерея скользящих миниатюр под или рядом с изображением при наведении курсора мыши необязательна. По умолчанию мы используем jQuery.axZmThumbSlider , которое является одним из расширений AJAX-ZOOM. Это легко настраиваемый, изменяемый скин, отзывчивый и удобный для касания. Вы можете настроить его для отображения по горизонтали, вертикали или даже в зависимости от разрешения экрана и других факторов.Также есть возможность полностью отключить миниатюры или отображать только эскизы изображений без слайдера в виде структуры HTML Ul> LI .

О компании «Fancybox»

Один из вариантов открытия программы просмотра AJAX-ZOOM находится в адаптивном Fancybox. Чтобы Fancybox мог работать со средством просмотра AJAX-ZOOM таким образом, код Fancybox версии 1.3.4 нуждался в небольшой модификации. Эта модифицированная версия упакована с AJAX-ZOOM. Изменения не влияют на исходную функциональность.Однако Fancybox версии 2 не требует каких-либо модификаций для работы в качестве полноэкранного адаптивного окна с содержимым AJAX-ZOOM в нем.

Это расширение бесплатное?

В большинстве случаев ответ будет отрицательным.

Hover, Focus и другие состояния

Overview

Подобно тому, как Tailwind обрабатывает адаптивный дизайн, стилизация элементов при наведении, фокусировке и т. Д. Может быть выполнена с помощью префикса утилит с соответствующим вариантом состояния.

  <форма>
  <вход>
  <кнопка>
    зарегистрироваться
  
  

Не все варианты состояния включены для всех утилит по умолчанию из-за соображений размера файла , но мы сделали все возможное, чтобы включить наиболее часто используемые комбинации из коробки.

Полный список вариантов, включенных по умолчанию, см. В справочной таблице в конце этой страницы.

Если вам нужно настроить таргетинг на состояние, которое Tailwind не поддерживает, вы можете расширить поддерживаемые варианты, написав вариантный плагин.

Hover

Добавьте префикс hover: , чтобы применять утилиту только при наведении курсора.

  <кнопка>
  Наведи меня
  

По умолчанию вариант hover включен для следующих основных плагинов:

• backgroundColor
• backgroundOpacity
• borderColor
• borderOpacity
• boxShadow
• box
• gradientColorStops
• непрозрачность
• повернуть
• масштаб
• перекос
• textColor
• textDecoration
• textOpacity
• Вы можете перевести 9027 включены ли варианты hover для плагина в разделе вариантов вашего попутного ветра .config.js файл:

   
  module.exports = {
    
    варианты: {
      продлить: {
        дополнение: ['hover'],
      }
    },
  }  

  ---

  Focus

  Добавьте префикс focus: , чтобы применить утилиту только к фокусу.

  По умолчанию вариант focus включен для следующих основных подключаемых модулей:

  • доступность
  • backgroundColor
  • backgroundOpacity
  • borderColor
  p
  • borderColor
  p
  • border
  • boxShadow
  • gradientColorStops
  • непрозрачность
  • контур
  • placeholderColor
  • placeholderOpacity
  • ringColorColacity
  • ringOffsetColor
  • кольцоШирина
  • поворот
  • масштаб
  • перекос
  • текстЦвет
  • текстУкрашение
  • текстOpaci ty
  • перевести
  • zIndex

  Вы можете контролировать, включены ли варианты focus для подключаемого модуля в разделе вариантов вашего попутного ветра . config.js файл:

   
  module.exports = {
    
    варианты: {
      продлить: {
        maxHeight: ['focus'],
      }
    },
  }  

  ---

  Active

  Добавьте префикс active: , чтобы применять утилиту только тогда, когда элемент активен.

    <кнопка>
    Нажми на меня
    

  По умолчанию активный вариант не включен ни для каких подключаемых модулей ядра .

  Вы можете управлять включением активных вариантов для плагина в разделе вариантов вашего попутного ветра .config.js файл:

   
  module.exports = {
    
    варианты: {
      продлить: {
        backgroundColor: ['активный'],
      }
    },
  }  

  ---

  Group-hover

  Если вам нужно стилизовать дочерний элемент при наведении курсора на определенный родительский элемент, добавьте класс group к родительскому элементу и добавьте префикс group-hover: к утилите на дочерний элемент.

  Новый пр.

  Создайте новый проект из множества начальных шаблонов.

    
  
    
   Новый проект 
    
   Создайте новый проект из множества начальных шаблонов. 
    

  По умолчанию вариант group-hover включен для следующих основных плагинов:

  • backgroundColor
  • backgroundOpacity
  • borderColor
  • borderOpacity
  • boxShadow
  • непрозрачность
  • textColor
  • textDecoration
  • textOpacity

  Вы можете управлять включением вариантов группового наведения для плагина в разделе вариантов попутного ветра .config.js файл:

   
  module.exports = {
    
    варианты: {
      продлить: {
        DivideColor: ['group-hover'],
      }
    },
  }  

  ---

  Group-focus

  Вариант group-focus работает так же, как group-hover , за исключением фокуса:

    
    
    Закладка
    

  По умолчанию вариант с групповым фокусом не включен ни для каких подключаемых модулей ядра .

  Вы можете контролировать, включены ли варианты с групповым фокусом для подключаемого модуля в разделе вариантов файла tailwind.config.js :

   
  module.exports = {
    
    варианты: {
      продлить: {
        backgroundColor: ['group-focus'],
      }
    },
  }  

  ---

  Focus-within

  Добавьте префикс focus-within: , чтобы применять утилиту, только когда дочерний элемент имеет фокус.

    <форма>
    
  
      
  
        
      
      <вход>
    
    

  По умолчанию вариант focus-within включен для следующих основных плагинов:

  • доступность
  • backgroundColor
  • backgroundOpacity
  • borderColor
  • borderOpacity
  • boxShadow
  • opacity
  • контур
  • ringColor
  • ringOffsetColor
  • ringOffsetWidth
  • ringOpacity
  • ringWidth
  • ringWidth
  • textOpacity
  • zIndex

  Вы можете управлять включением вариантов фокусировки в пределах для подключаемого модуля в разделе вариантов попутного ветра . config.js файл:

   
  module.exports = {
    
    варианты: {
      продлить: {
        масштаб: ['фокус внутри'],
      }
    },
  }  

  ---

  Focus-visible

  Обратите внимание, что focus-visible в настоящее время требует полифиллов JS и PostCSS для достаточной поддержки браузером.

  Добавьте префикс focus-visible: , чтобы применять утилиту только тогда, когда элемент имеет фокус, но только если пользователь использует клавиатуру.

  Кольцо в фокусе Кольцо на фокусе видно

    <кнопка>
    Кольцо в фокусе
  
  <кнопка>
    Кольцо на фокусе видно
    

  Обратите внимание, что в настоящее время только Chrome, Edge и Firefox изначально поддерживают focus-visible , поэтому для достаточной поддержки браузера вы должны установить и настроить как полифил JS, видимый в фокусе, так и полифил PostCSS, видимый в фокусе.Обязательно включите плагин PostCSS после Tailwind в свой список плагинов PostCSS:

   
  module. exports = {
    плагины: {
      tailwindcss: {},
      'postcss-focus-visible': {},
      автопрефиксатор: {}
    }
  }  

  По умолчанию вариант с видимым фокусом не включен ни для каких подключаемых модулей ядра .

  Вы можете управлять включением вариантов с видимым фокусом для подключаемого модуля в разделе вариантов попутного ветра .config.js файл:

   
  module.exports = {
    
    варианты: {
      продлить: {
        textDecoration: ['фокус-видимый'],
      }
    },
  }  

  ---

  Motion-safe

  Добавьте префикс motion-safe: , чтобы применять утилиту только тогда, когда медиа-функция prefers-limited-motion совпадает с без предпочтений .

  Например, эта кнопка будет анимировать только при наведении курсора, если пользователь не включил «Уменьшение движения» в своей системе.

    <кнопка>
    Наведи меня
    

  Обратите внимание, что в отличие от большинства других вариантов, Motion-Safe можно комбинировать с обоими адаптивными вариантами и другими вариантами, такими как hover , складывая их в следующем порядке:

  По умолчанию, вариант с защитой от движения не включен ни для каких основных плагинов .

  Вы можете контролировать, включены ли варианты motion-safe для подключаемого модуля в разделе вариантов файла tailwind.config.js :

   
  module.exports = {
    
    варианты: {
      продлить: {
        перевести: ['безопасное движение'],
      }
    },
  }  

  ---

  Motion-reduce

  Добавьте префикс motion-reduce: , чтобы применять утилиту только тогда, когда медиа-функция prefers-limited-motion соответствует reduce .

  Например, эта кнопка по умолчанию будет анимировать при наведении курсора, но анимация будет отключена, если пользователь включил «Уменьшение движения» в своей системе.

    <кнопка>
    Наведи меня
    

  Обратите внимание, что в отличие от большинства других вариантов, motion-reduce можно комбинировать с обоими адаптивными вариантами и другими вариантами, такими как hover , складывая их в следующем порядке:

  По умолчанию вариант с уменьшением движения не включен ни для каких основных плагинов .

  Вы можете управлять включением вариантов уменьшения движения для подключаемого модуля в разделе вариантов вашего файла tailwind.config.js :

   
  module.exports = {
    
    варианты: {
      продлить: {
        перевести: ['уменьшение движения'],
      }
    },
  }  

  ---

  Отключено

  Добавьте префикс disabled: , чтобы применять утилиту только при отключенном элементе.

    <кнопка>
    представить
  
  <кнопка отключена отключена>
    представить
    

  По умолчанию вариант отключен, не включен ни для каких подключаемых модулей ядра .

  Вы можете управлять включением отключенных вариантов для подключаемого модуля в разделе вариантов вашего файла tailwind.config.js :

   
  module.exports = {
    
    варианты: {
      продлить: {
        непрозрачность: ['отключено'],
      }
    },
  }  

  ---

  Посещено

  Добавьте префикс посещено: , чтобы применять утилиту только при посещении ссылки.

     Ссылка   

  По умолчанию вариант посещенных не включен ни для каких основных подключаемых модулей .

  Вы можете управлять включением посещенных вариантов для подключаемого модуля в разделе вариантов вашего файла tailwind.config.js :

   
  module.exports = {
    
    варианты: {
      продлить: {
        textColor: ['посетил'],
      }
    },
  }  

  ---

  Проверено

  Добавьте префикс проверено: , чтобы применять утилиту только тогда, когда в данный момент установлен переключатель или флажок.

  По умолчанию вариант с отметкой не включен ни для каких основных плагинов .

  Вы можете управлять включением проверенных вариантов для подключаемого модуля в разделе вариантов вашего файла tailwind. config.js :

   
  module.exports = {
    
    варианты: {
      продлить: {
        backgroundColor: ['проверено'],
      }
    },
  }  

  ---

  Первый дочерний элемент

  Добавьте префикс first: , чтобы применять утилиту, только если она является первым дочерним элементом своего родителя. Это в основном полезно, когда элементы создаются в каком-то цикле.

    
  
    
  
      {{ пункт }}
    
    

  Важно отметить, что вы должны добавлять любые утилиты first: к дочернему элементу, а не к родительскому элементу.

  По умолчанию вариант first-child не включен ни для каких подключаемых модулей ядра .

  Вы можете управлять включением первых вариантов для подключаемого модуля в разделе вариантов вашего попутного ветра .config.js файл:

   
  module.exports = {
    
    варианты: {
      продлить: {
        borderWidth: ['первый'],
      }
    },
  }  

  ---

  Последний дочерний элемент

  Добавьте префикс last: , чтобы применять утилиту только тогда, когда она является последним дочерним элементом своего родителя.

  No related posts.