Изображение наклон CSS для слайдера вращения

Question

Я использую слайдер с оборотами, и у меня возникла проблема. В качестве примера я использую оригинальную демонстрацию отсюда: https://revolution.themepunch.com/wordpress-photography-slider.

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

В слайдере вращения вы можете добавлять классы, идентификаторы и CSS к определенным изображениям, поэтому мне, возможно, нужен CSS-код, который делает это возможным. Я пробовал несколько кодов, которые я нашел в Интернете, но ни один из них не делает трюк, потому что все они также имеют часть html.

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

Я нахожусь на правильном пути с этим? И может ли кто-нибудь помочь мне с кодом для этого?

Большое спасибо заранее!

Answer 1

добавить класс, а затем сделать некоторые CSS

, например:

<img class="slider-img"> 

.slider-img:hover { 

{ 

дайте мне знать, если вам нужна помощь с CSS.

EDIT:

попробуйте это.

компресса каждые из ваших изображений около 2 див, слайдер IMG и IMG-обертывание:

<div class="slider-img"> 
    <div class="img-wrap"> 
     <img src="http://science-all.com/images/wallpapers/stock-image/stock-image-15.jpg"> 
    </div> 
</div> 

затем сделать некоторые CSS:

.slider-img { 
    width: 200px; 
    cursor: pointer; 
} 

.slider-img img { 
    width: 100%; 
} 

.slider-img:hover .img-wrap { 
    background-color: black; 
    transform: scale(0.7); 
    -o-transform: scale(0.7); 
    -ms-transform: scale(0.7); 
    -moz-transform: scale(0.7); 
    -webkit-transform: scale(0.7); 
    transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    -ms-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -webkit-transition: all .5s ease-in-out; 
} 

.slider-img:hover .img-wrap img{ 
    opacity: 0.5; 
} 

в основном то, что делает CSS является то, что, когда вы наведите указатель мыши на главный div (.slider-img), div, содержащий изображение (.img-wrap), уменьшается на 70% с помощью css -webkit-transform: scale (0.7);

он также получает цвет фона черного цвета с непрозрачностью 80%. это дает эффект затемненного изображения.

-webkit-transition: все .5s ease-in-out; дает плавный эффект перехода.

Если вам интересно, почему существует 5 разных строк css для одной и той же вещи, это потому, что каждая строка предназначена для определенных браузеров. -о-opera, -moz- is firefox и т. д.

также не забудьте изменить ширину .slider-img в соответствии с вашими потребностями.

проверка из рабочего примера на Js скрипки:

here