title: Hover over an Image and another image appears
body: <p>Hi i need help with some css/html</p>
  
  <p>i want to hover over an image and then another image/text appears with the background image becoming opacity :0.5</p>
  
  <pre><code>&lt;style&gt;
          .your-img {
              width: 344px; /* your image width and height here */
              height: 857px;
              background-image: url('images/men.png');        
          }        
          .your-hover {
              width: 341px;
              height: 225px;
              opacity: 0;
              filter: alpha(opacity = 0);
              background-image: url('images/men2.png');
          align:bottom;
  
          }
          .your-hover:hover {           
              opacity: 0.5;
              filter: alpha(opacity = 50);
      }
          &lt;/style&gt;
  
  
  &lt;div class="your-img"&gt;
      &lt;div class="your-hover"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is the code i am using. men.png is the main image and the men2.png is the image that should appear when i hover over men.png.</p>
  
  <p>but when i hover over men.png its opacity is 1 and the hovered image is 0.5</p>
  
  <p>how do i make the background image 0.5 and the hovered image 1</p>