Removing text from Poster Image on mobile

Site URL: http://www.planetcreative.co

Hello!

I've used CSS to create a hover effect for desktop over poster images using this CSS: 

@media only screen and (min-width:834px) {
.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 1s;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color: hsla(231, 35%, 52%, 1)
}
}
.image-block-poster-text-alignment-left .sqs-block-image .design-layout-poster .image-card > * {
    text-align: center !important;
}

I'm trying to remove the text on mobile (it is just centered text with no hover effect on mobile). Can someone please help me write code for removing that centered text on the mobile version? Thank you!

Hi,

What is access password?

Or try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
	.design-layout-poster .image-card * {
		opacity: 0 !important;
}
}