Bagaimana cara mengirit kode css ?

Gini gan saya kan mau nampilin gambar di website saya. tapi pas gambar tsb di hover kita bakal munculin caption nah saya udah buat 1 dan berhasil tapi ketika saya nampilin 2 gambar hasilnya berbeda jauh seperti ekspetasi.

pada gambar pertama. saat di hover itu nampilin caption yang saya inginkan tetapi di gambar ke2 saya hover captionnya itu muncul di gambar ke 1 . saya bisa nyelesaiinnya tapi bakal ngeboros code css seperti sata harus ngatur margin-leftnya lagi . bagus kalau cuma 2 gambar bagaimana kalo sampe 10 - 15 :D nih contohnya

contoh 1 ketika gambar pertama di hover [img] https://image.prntscr.com/image/QQzkWu5yTs6332IZ0SiWpA.png[/img]

contoh 2 ketika gambar kedua di hover

Mohon bantuannya gan :D

nih kode html

<div class="lokasi">
  <div id="karya">
    <img id="img_karya" src="gambar/web/1.png" alt="WEB DEVELOPMENT" ">
    <div id="penutup"></div>
    <div id="text">"Halaman Depan"</div>
   </div>

   <div id="karya">
      <img id="img_karya" src="gambar/web/2.png" alt="WEB DEVELOPMENT" ">
       <div id="penutup"></div>
	<div id="text">"Halaman Depan" 1</div></a>
    </div>
</div>

Kode css nya

.lokasi{
	width: 100%;
	display: inline;
}
#karya{
	clear: both;
	width: 100%;
	height: auto;
	display: inline;
}

#img_karya{
	width: 300px;
    height: 200px;
   margin-left:3%;

}
#penutup {
	width: 0%;
    height: 200px;
	background-color: black;
	opacity: 1;
	position: absolute;
	margin-left:3%;
    margin-top: -16.6%;
    opacity: 0.5;
    transition:0.5s all linear;
}

#text{
	width: 300px;
    height: 200px;
    color: white;
    z-index: -40;
    font-size: 20pt;
    position:absolute;
    text-align: center;
    margin-left: 3%;
    margin-top: -8.6%;
    transition:0.5s all linear;
}

#karya:hover #penutup{
	width: 300px;
	transition:0.5s all linear;
}
#karya:hover #text{
	z-index: 1;
	transition:0.5s all linear;
}