Wie man mehr als einen IMG in derselben css/div gleichzeitig hinzufügen kann

Question

Bitte helfen Sie mir bitte. Wie zielen Sie viele Imgs und verwenden Sie die gleiche CSS für alle, anstatt sie einzeln zu tun, wie ich es getan habe. Im Wesentlichen, was ist die richtige Syntax, um die .jpg-Dateien in der richtigen Reihenfolge zu haben. Danke für Ihre Hilfe und Zeit!

<style> 
/*Image hover*/ 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"]{ 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"]:hover{ 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 

    .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"]{ 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"]:hover{ 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 


     .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"]{ 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"]:hover{ 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 


    .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]{ 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]:hover{ 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 




</style> 

Grim Vorschlag:

<style> 
/*Image hover*/ 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"], { 
    -webit-transition: -webkit-transform .7s ease !important; 
    -moz-transition: -moz-transform .7s ease !important; 
    -ms-transition: -ms-transform .7s ease !important; 
    -o-transition: -o-transform .7s ease !important; 
    transition: transform .7s ease !important; 
    -webkit-transform: scale(.9) !important; 
    -moz-transform: scale(.9) !important; 
    -ms-transform: scale(.9) !important; 
    -o-transform: scale(.9) !important; 
    transform: scale(.9) !important; 
} 

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h1_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"]:hover { 
    -webkit-transform:scale(1) !important; 
    -moz-transform:scale(1) !important; 
    -ms-transform:scale(1) !important; 
    -o-transform:scale(1) !important; 
    transform:scale(1) !important; 
} 

</style> 

Nicht sicher, was Im fehlenden

Answer 1

Assiming Sie kann nicht nur eine Klasse zu den Bildern hinzufügen, können Sie Kommas verwenden.

So etwas wie:

.wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/published/h4.png?1489059309"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h2_orig.png"], .wsite-image-border-none img[src="/uploads/4/1/3/2/41323535/h3_orig.png"] { 
     -webit-transition: -webkit-transform .7s ease !important; 
     -moz-transition: -moz-transform .7s ease !important; 
     -ms-transition: -ms-transform .7s ease !important; 
     -o-transition: -o-transform .7s ease !important; 
     transition: transform .7s ease !important; 
     -webkit-transform: scale(.9) !important; 
     -moz-transform: scale(.9) !important; 
     -ms-transform: scale(.9) !important; 
     -o-transform: scale(.9) !important; 
     transform: scale(.9) !important; 
    } 

Oder besser noch, schauen Sie in so etwas wie SCSS mit Ihren CSS-Dateien für Sie zu erstellen.