title: Black transparent overlay on image
body: <p>I'm trying to get a light black overlay on the image when you hover on it (like the text) sorry I'm new to css and HTML! </p>
  
  <p>help would be appreciated</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="con"&gt;
     &lt;div id="box1"&gt;
        &lt;p id="text1"&gt;
           &lt;a href="url"&gt;DESTINATIONS&lt;/a&gt;
        &lt;/p&gt;
        &lt;/p&gt;
        &lt;p id="text2"&gt;
           AMALFI&lt;BR&gt;SORRENTO&lt;BR&gt;POSITANO&lt;/a&gt;
        &lt;/p&gt;
  
        &lt;p id="text3"&gt;
           &lt;a href="url"&gt;THINGS TO DO&lt;/a&gt;
        &lt;/p&gt;
        &lt;/p&gt;
        &lt;p id="text4"&gt;
           TOURS&lt;BR&gt;MUSUEMS&lt;BR&gt;SHOPPING&lt;/a&gt;
        &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#con {
     width:1024px;
     height:670px;
     background-color: #161717;
  }
  
  
  #box1 {
     float: left;
     font-size: 25px;
     width: 388px;
     height: 477px;
  
     background-image: url(media/trying1.png);
     background-size: cover;
     margin-left: 120px;
     margin-top: 90px;
  }
  
  
  #text1 {
     z-index:100;
     color:white;
     font-size:30px;
     text-align: center; 
     margin-top:80px;
     line-height:55px;
     opacity: 0;
     transition: all 0.5s;
  }
  
  #box1:hover #text1 {
     opacity: 1;
  }   
  </code></pre>