How to add style to more than one img in the same css / div at the same time

Question

Please may you help me. How do you target lots of imgs and use the same css for all instead of having to do them individually as I have done. Essentially what is the correct syntax to have the .jpg files in order. Thank you for your help and time!

   <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 suggestion:

<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>

Not sure what Im missing

Answer 1

Assiming you can't just add a class to the images, you can use commas.

So something like:

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

Or, better still, look into using something like SCSS to create your CSS files for you.