title: Mouse over Effect on a picture through CSS, with changed background and Text
body: <p>I am trying to achieve the effect of mouse over on a picture which dims it's background and brings over a text on top.</p>
  
  <p>As an e.g. you can visit <a href="http://www.whitehouseblackmarket.com/store/home.jsp" rel="nofollow noreferrer">this</a> page and scroll down a little to see the second set of two pictures. When you mouseover them, they become darker and bring up the text.</p>
  
  <p>One of the things that came in mind was to change the picture with mouseover but that's an overkill. I am hoping to achieve it through CSS.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="bottomWide"&gt;           
      &lt;ul&gt;
          &lt;li&gt;
              &lt;img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt=""&gt; 
                                  &lt;div&gt;Some text here, style as needed&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt=""&gt;
                                  &lt;div&gt;Some text here, style as needed&lt;/div&gt; 
          &lt;/li&gt;
  
      &lt;/ul&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#bottomWide{
      width:100%;
      margin:0 auto;
  
  
  }
  
  #bottomWide ul{
      margin:0;
      padding:0;
      /* For Mouse Over*/
      position: relative;
      display: inline-block;
  }
  #bottomWide li{
    list-style-type: none;
    display: inline-block;
      width:50%;
      text-align:justify;
      float: left;
  }
  
  #bottomWide img{
      width:100%;
  }
  
  
  
  #bottomWide li div{
      position: absolute;
      top: 0;
      left: 0;
      /* 100% will equal the dimensions of the image, as nothing else will be inside the .container */
      width: 100%;
      height: 100%;
      color: #fff;
      background-color: #000;
      opacity: 0;
      /* This will create the fade effect */
      transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
      /* Include all required vendor prefixes for opacity and transition */
  }
  
  #bottomWide li div:hover {
      opacity: 0.7;
  }
  </code></pre>