同级元素继承不透明度

我有以下问题-每当我点击照片,我希望它成为。3 opac和 .remove-icon 元素可见。但是,图标在某种程度上继承了图像的不透明度。如何防止这种情况?下面是我的代码

HTML

<div id="photos-wrapper">
  <div>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
  </div>
  <div>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
  </div>
  <div>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
  </div>
</div>

CSS

#photos-wrapper .remove-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    font-size: 25px;
    color: #ff0000;
    opacity: 0;
}

jQuery

$(photosContainer).on('click', 'div', function(e) {
 $(this).find('img').animate({opacity: '.3'}, 300);
 $(this).find('.remove-icon').css('opacity', '1');
})