隐藏一个图像并在悬停时显示另一个图像

Question

我有2个图像一个放在另一个上面，我试图做的是根据父母悬停来改变不透明度。

意味着默认情况下hovethumb的不透明度设置为0.但是当我将鼠标悬停在索引上时，hoverthumb的不透明度应该更改为1，而bdata的不透明度应该更改为0.5

但造型并不起作用......我使用的造型是div.productindex:hover > div.hoverthumb＆amp; div.productindex:hover > div.bdata

有人可以帮我解决这些问题吗？

我的PHP代码：

<div class="index ">

    <div class="bdata">                     

                    <div class="thumb"><?php the_post_thumbnail('')?></div>
    </div>  
    <div class="hoverthumb clearfix"><img src="<?php echo get_template_directory_uri(); ?>/images/buy.png" width="50px" ;></div>         

</div>

还如何准确地将图像对齐在框索引的中心

.index{
    float: left;
    height: auto;
    padding-bottom:10px;    
    margin-bottom:20px;
    }
.hoverthumb{
position:absolute;
opacity:0;
clear:both;
}
div.index:hover > div.bdata{
opacity:0.5;
 border: thin outset #EC008C;  
}

div.index:hover > div.hoverthumb{
opacity:1;
}

.thumb{
width:100%;
}

.thumb img{
    width:100%;
    height: auto;
}