when viewing the collection list page on mobile a black box appears over the collection thumbnail

[Samplescents]

when viewing the collection list page on mobile a black box appears over the collection thumbnail. I would like it to look the same as when viewing the page on a computer as it does not have this black box on computer. only when viewing from a mobile device, iv taken off password entry on my website so you can have a look. if you view it on a mobile device for some reason there will be a black box, this doesnt happen on desktop. https://samplescentsuk.com/collections 

[PeanutButter]

Hi there, what theme are you using?

[Samplescents]

hello thanks for replying am using boundless

[PeanutButter]

Please try adding this add the end of your Assets/theme.scss.liquid file:

.collection-grid__title {
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
}

.collection-grid__link-overlay:hover .collection-grid__title, 
.collection-grid__link-overlay:focus .collection-grid__title {
    opacity: 1;
}

[Samplescents]

thanks that has help make it so the black box isnt there the whole time but when i click on the collection the black box appear over the thumbnail for a bit.

[PeanutButter · Accepted solution]

My code was to create same behaviour in mobile than in desktop, which is title being shown on hover.  If you want to completely remove the title in mobile, then replace the code I send you before with just this:

.collection-grid__title {
  opacity: 0;
}

[Samplescents]

thanks that has sorted my problem