Bild Hover CSS für Revolution Slider

Question

Ich benutze Revolution Slider und ich bin mit einem Problem stecken. Als Beispiel verwende ich die Original-Demo von hier: https://revolution.themepunch.com/wordpress-photography-slider.

Auf der Registerkarte "Portfolio" sehen Sie Bilder, die mit einem Übergang in der Größe schrumpfen und ein wenig dunkler aussehen, wenn Sie den Mauszeiger darüber bewegen. Das ist es, was ich auch will, aber ich kann nicht herausfinden, wie.

In Revolution Slider können Sie Klassen, IDs und CSS zu bestimmten Bildern hinzufügen, was ich wahrscheinlich brauche, ist ein CSS-Code, der dies ermöglicht. Ich habe einige Codes ausprobiert, die ich online gefunden habe, aber keiner von ihnen macht den Trick, weil sie alle auch mit einem HTML-Teil kommen.

Meine Vermutung war: das Bild ist bereits da, ich brauche nicht den HTML-Teil, nur zuweisen Klassen oder IDs zu den Bildern und geben Sie jedem Bild die gleiche Art von CSS-Code.

Bin ich damit auf dem richtigen Weg? Und kann mir jemand mit dem Code dafür helfen?

Vielen Dank im Voraus!

Answer 1

eine Klasse hinzufügen, dann tun einige css

zum Beispiel:

<img class="slider-img"> 

.slider-img:hover { 

{ 

lassen Sie mich wissen, wenn Sie mit der CSS-Hilfe benötigen.

EDIT:

versuchen Sie dies.

wickeln jedes Ihrer Bilder um 2 divs, Slider-img und img-wrap:

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

dann einige CSS tun:

.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; 
} 

im Grunde, was die CSS tut, wenn Sie Bewegen Sie den Mauszeiger über das Hauptdiv (.slider-img), das div mit dem Bild (.img-wrap) wird von der css -webkit-transform um 70% verkleinert: scale (0.7);

es erhält auch eine Hintergrundfarbe von Schwarz mit einer Deckkraft von 80%. Dies gibt den verdunkelten Bildeffekt.

-Webkit-Übergang: alle .5s Ease-In-Out; gibt einen sanften Übergangseffekt.

Wenn Sie sich wundern, warum es 5 verschiedene Linien von CSS für die gleiche Sache gibt, das ist, weil jede Linie spezifische Browser anvisiert. -o ist Opera, -moz- ist firefox etc.

auch, stellen Sie sicher, die .slider-img Breite zu ändern, um Ihre Bedürfnisse zu erfüllen.

Check-out Arbeitsbeispiel auf js Geige:

here