Sibling element inheriting opacity

Question

I have the following problem - anytime I click on photo I want it to become .3 opac and the .remove-icon element to be visible. And it works as intended, however, the icon is somehow inheriting the image opacity. How to prevent that? My code below

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');
})  

Answer 1

I suspect you viewing your opacity: 1 icon through your transparent image. You want the icon to appear overtop. You could do this by adding a z-index to the icon, but I'd rather reorder the html so the icons are added after:

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