title: Hide one image and display another on hover
body: <p>I have 2 images placed one on top of another, and what I'm trying to do is to change the opacity based on hover on parent.</p>
  
  <p>Meaning that by default hovethumb's opacity is set to 0. But when I hover on index then hoverthumb's opacity should be changed to 1 and bdata's opacity should be changed to 0.5</p>
  
  <p>But the styling doesn't work... The stylings I use are <code>div.productindex:hover &gt; div.hoverthumb</code>  &amp; <code>div.productindex:hover &gt; div.bdata</code> </p>
  
  <p>Can someone help me figure out to target them correctly?</p>
  
  <p>My php code :</p>
  
  <pre><code>&lt;div class="index "&gt;
  
      &lt;div class="bdata"&gt;                     
  
                      &lt;div class="thumb"&gt;&lt;?php the_post_thumbnail('')?&gt;&lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="hoverthumb clearfix"&gt;&lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/images/buy.png" width="50px" ;&gt;&lt;/div&gt;         
  
  &lt;/div&gt;
  </code></pre>
  
  <p>also how to align the image exactly in the centre of the box index</p>
  
  <pre><code>.index{
      float: left;
      height: auto;
      padding-bottom:10px;    
      margin-bottom:20px;
      }
  .hoverthumb{
  position:absolute;
  opacity:0;
  clear:both;
  }
  div.index:hover &gt; div.bdata{
  opacity:0.5;
   border: thin outset #EC008C;  
  }
  
  div.index:hover &gt; div.hoverthumb{
  opacity:1;
  }
  
  .thumb{
  width:100%;
  }
  
  .thumb img{
      width:100%;
      height: auto;
  }
  </code></pre>