CSS
.opacity_first img {
opacity: 0.5;
}
.opacity_first img:hover {
opacity: 1.0;
}
.opacity_second img:hover{
opacity: 0.5;
}
Html
<div style="float:left;" class="opacity_first">
<p>Soluktan Orjinaline</p>
<a href="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" target="_blank"><img src="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" alt="Yol Resmi" width="450" height="450"></a>
</div>
<div class="opacity_second">
<p>Orjinalinden soluğa</p>
<a href="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" target="_blank"><img src="https://htmlcssdersleriogreniyorum.com/resimler/yol.jpg" alt="Yol Resmi 2" width="450" height="450"></a>
</div>
Çıktı

Tags:

css image opacity not text
css image opacity rgba
css image opacity background
css image opacity border
css opacity kullanımı
css image hover opacity color
css change image opacity on hover