Can You Overlay a Transparent Div on an Image

transparent div over an image but opaque text

change the background of .hilight to rgba(0,0,0,0.65) and remove the opacity.

.hilight {
 background-color: rgba(0,0,0,0.65);
 position: absolute;
 height: 85px;
 width: 415px;
 font-family: Verdana, Geneva, sans-serif;
 color: #FFF;
 bottom: 0px;
 z-index: 1;
}

Can you overlay a transparent div on an image

Sure, here is a cross-browser way of doing so:

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

This method doesn't require JavaScript, doesn't cause to lose ClearType text in IE, and is compatible with Firefox, Safari, Opera, IE6,7,8... Unfortunately, it only works for one line of text. If you want multiple lines, either adjust div.imageSub div's height and line-height property, or use the following (modifications to the CSS and requires the label to be specified twice).

<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;
      }
      div.imageSub div.blackbg {
        z-index: 2;
        color: #000;
        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">Label Goes Here</div>
        <div class="label">Label Goes Here</div>
      </div>
    </body>
</html>

Adding transparent overlay to div

<style>.featured-image {  height: 338px;  position: relative;}
.overlay {  position:absolute;  top:0px;  left:0px;  background-color: rgba(0, 0, 0, 0.6);  width: 100%;  height: 100%;  z-index: 2;}</style><div class="featured-image">  <div class="overlay"></div>    <img src="https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg">  </div>

cover div or image with transparent color

Thank you all,

So I am checking on the DB for the property, if exist I am appending new div as child for the result Div and this is the CSS:

div.cheapest {
 background: red;
 z-index:85;
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 opacity:.3;
}

Overlaying a transparent div, which when clicked disappears

You are missing a $ sign:

var overlay = $('#overlay');

Working demo

If you check your JavaScript console, you will see an error pointing to this line of code.

Display text overlay and apply image transparency on hover

You should move the hover function to the parent div.

Change .attribution:hover to .image-container:hover .attribution and .single-image:hover to .image-container:hover .single-image.

Strangely enough, in order for this to work, you also need to add border or background-color to your parent div. (Here is why)

I added a transparent color background-color: rgba(0, 0, 0, 0);.

.image-container {  display: inline-block;  position: relative;  background-color: rgba(0, 0, 0, 0);}
/* Text */.attribution {  display: none;  color: white;  position: absolute;  bottom: 20px;  left: 20px;}
.image-container:hover .attribution {  display: block;}
.single-image {  margin: 7px;  height: 350px;  width: 350px;  object-fit: cover;}
.image-container:hover .single-image {  opacity: 0.7;  transition: 0.5s;}

<div class="image-container">    <a href="#" target="_blank" rel="noopener noreferrer">       <img class="single-image" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" alt="Sample Image" />       <p class="attribution">Kitten!</p>    </a> </div>