Image opacity in html

img {
  opacity: 0.5;
}

-2

Have a transparent div on an image html

<html>
  <head>
    <style type="text/css">
      div.imageSub { position: relative; }
      div.imageSub img { z-index: 1; }
      div.imageSub div {
        position: absolute;
        left: 15%;
        right: 15%;
        bottom: 0;
        padding: 4px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        overflow: hidden;
      }
      div.imageSub div.blackbg {
        z-index: 2;
        background-color: #000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        opacity: 0.5;
      }
      div.imageSub div.label {
        z-index: 3;
        color: white;
      }
    </style>
  </head>
    <body>
      <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
        <img src="image.jpg" alt="Something" />
        <div class="blackbg"></div>
        <div class="label">Label Goes Here</div>
      </div>
    </body>
</html>

-2

Source: stackoverflow.com

Similar codes

1 vote348 views1 answer
What is min attribute in password
Html
0 vote309 views1 answer
Notion general mention?
Html
27 votes303 views2 answers
Coding html ide online
Html
11 votes315 views2 answers
Bootstrap position fixed
Html
0 vote332 views1 answer
Codesandbox disable prettier
Html
0 vote320 views1 answer
Static html template
Html
8 votes299 views4 answers
Bootstrap popup alert
Html
32 votes314 views6 answers
Bootstrap alerts
Html
14 votes316 views4 answers
How to remove suggestions from input field
Html
12 votes291 views3 answers
Html page icon
Html