Multipurpose Website Templates. Как работать с эффектами (ховер, лайтбокс, масштабирование) изображений

Добрый день! Из этого видео-туториала Вы узнаете, как работать с эффектами (ховер, лайтбокс, масштабирование) изображений в Многоцелевых шаблонах сайтов.

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

Давайте узнаем, как это сделать.

Удаление/добавление эффекта лайтбокса

1. Откройте соответствующий файл .html страницы, в которую Вы вносите изменения, при помощи любого редактора кода (Notepad++, Sublime Text 2 и т. д.);

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

   

2. Используйте сочетание клавиш CTR+F/CMND+F (Windows OS/Mac OS), для того чтобы найти нужное изображение в файле:

   

3. Как Вы можете видеть, изображения портфолио ссылаются на лайтбокс:

   

4. Удалите атрибут <a> из кода, чтобы тот выглядел следующим образом:

   <div data-filter="*" class="col-xs-12 col-sm-6 col-md-4 isotope-item">
   <figure><img width="370" height="280" src="images/portfolio/portfolio-02-370x280.jpg" alt="">
   </figure> 

5. Сохраните файл и загрузите его на сервер, заменив оригинальный файл.

6. Обновите страницу на вашем сайте, Вы увидите, что у первого изображение больше нет эффекта лайтбокса.

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

1. Добавьте следующий фрагмент кода в атрибут изображения:

   <a class="thumbnail-classic" data-photo-swipe-item="" data-size="1170x600" href="images/portfolio/portfolio-02-1170x600.jpg"><figure>  </figure></a> 
   

   Здесь thumbnail-classic — это класс ссылки, data-size — это атрибут, который определяет размер большого изображения, которое открывается в лайтбоксе, а images/portfolio/portfolio-02-1170×600.jpg — это путь к изображению, которое должно открываться в лайтбоксе.

2. Вы можете использовать пользовательские классы CSS, для того чтобы стиль лайтбокса соответствовал вашему желанию.

3. Код должен выглядеть следующим образом:

   

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

Удаление эффекта масштабирования с изображений портфолио

1. Эффект масштабирования управляется свойством ‘transform’, которое применяется к классу изображения портфолио в файле style.CSS.

   

2. Для того чтобы удалить эффект масштабирования с изображений портфолио, найдите нужное правило стиля, используя инструмент разработчика и измените свойство ‘transform’ на ‘none’, чтобы оно выглядело следующим образом:

   transform: none;

3. В качестве альтернативы, Вы можете просто добавить следующее объявление правила в самый конец файла style.css:

   .thumbnail-classic > img, .thumbnail-classic > figure > img {
     transform: none !important;
   }

   Здесь ‘.thumbnail-classic > img, .thumbnail-classic > figure > img’ — это класс стиля изображения портфолио.

Теперь, допустим, что Вы хотите удалить эффект тени ховера с изображений портфолио.

Удаление эффекта тени ховера с изображений портфолио

1. Эффект тени ховера задан свойством ‘box-shadow’, которое применено к классу изображения портфолио в файле style.CSS.

   

2. Для того чтобы удалить эффект тени с изображений портфолио, найдите нужное правило стиля, используя инструмент разработчика и измените значение свойства ‘box-shadow’ на ‘none’, чтобы оно выглядело следующим образом:

   box-shadow: none;

3. В качестве альтернативы, Вы можете просто добавить следующее правило в конец вашего файла style.css:

   .thumbnail-classic > img, .thumbnail-classic > figure > img {
   box-shadow: none !important;
   }

   Где ‘.thumbnail-classic > img, .thumbnail-classic > figure > img’ — это класс стиля изображения портфолио.

Это конец туториала. Теперь Вы знаете, как работать с эффектами (ховер, лайтбокс, масштабирование) изображений в Многоцелевых шаблонах сайтов.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Ознакомьтесь с коллекцией Веб-шаблонов Bootstrap и выберите наилучший для вашего проекта.