<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Opacity & Transparency</title>
<style>
img.hv {opacity: 0.3;}
img.hv:hover {opacity: 1.0;}
div.op {width:210px; height:140px; background-color:#0000cc; display:inline-block; padding:5px;}
div.rgb {width:210px; height:140px; display:inline-block; padding:5px;}
</style>
</head>
<body>
<!-- image opacity -->
<p>
<img src="https://i.imgur.com/2jfIVgX.gif" style="height:120px; opacity:1.0; margin:5px;" alt="Lippy the Lion">
<img src="https://i.imgur.com/2jfIVgX.gif" style="height:120px; opacity:0.8; margin:5px;" alt="Lippy the Lion">
<img src="https://i.imgur.com/2jfIVgX.gif" style="height:120px; opacity:0.6; margin:5px;" alt="Lippy the Lion">
<img src="https://i.imgur.com/2jfIVgX.gif" style="height:120px; opacity:0.4; margin:5px;" alt="Lippy the Lion">
<img src="https://i.imgur.com/2jfIVgX.gif" style="height:120px; opacity:0.2; margin:5px;" alt="Lippy the Lion">
</p>
<!-- opacity and hover -->
<p>
<img src="https://i.imgur.com/RYF4Sb3.jpg" class="hv" style="height:140px; margin:5px;" alt="Boston">
<img src="https://i.imgur.com/11vOsk0.jpg" class="hv" style="height:140px; margin:5px;" alt="Camden">
<img src="https://i.imgur.com/8SmGIO9.jpg" class="hv" style="height:140px; margin:5px;" alt="Portland">
<img src="https://i.imgur.com/PtAW24h.jpg" class="hv" style="height:140px; margin:5px;" alt="New York">
</p>
<!-- division opacity -->
<p>
<div class="op" style="opacity:1.0;">OPACITY 1.0<br><img src="https://ihypress.de/holidays/stpats/lepr5.gif"></div>
<div class="op" style="opacity:0.7;">OPACITY 0.7<br><img src="https://ihypress.de/holidays/stpats/lepr5.gif"></div>
<div class="op" style="opacity:0.4;">OPACITY 0.4<br><img src="https://ihypress.de/holidays/stpats/lepr5.gif"></div>
<div class="op" style="opacity:0.1;">OPACITY 0.1<br><img src="https://ihypress.de/holidays/stpats/lepr5.gif"></div>
</p>
<!-- background alpha channel -->
<p>
<div class="rgb" style="background-color:rgba(255,0,0,1.0);">RGBA 1.0<br><img src="https://ihypress.de/holidays/stpats/lepr5.gif"></div>
<div class="rgb" style="background-color:rgba(255,0,0,0.7);">RGBA 0.7<br><img src="https://ihypress.de/holidays/stpats/lepr5.gif"></div>
<div class="rgb" style="background-color:rgba(255,0,0,0.4);">RGBA 0.4<br><img src="https://ihypress.de/holidays/stpats/lepr5.gif"></div>
<div class="rgb" style="background-color:rgba(255,0,0,0.1);">RGBA 0.1<br><img src="https://ihypress.de/holidays/stpats/lepr5.gif"></div>
</p>
<!-- background alpha channel example -->
<div style="display:grid; width:420px; height:280px; overflow:hidden; background-image:url('https://i.imgur.com/hOHwdh1.jpg'); background-size:100% 100%; align-content: center; justify-content: center;">
<div style="width:350px; height:30px; text-align:center; font-size:1.3em; border:1px solid #000000; background-color:rgba(255,255,255,0.6);">Hartford, Connecticut</div>
</div>
</body>
</html>
