Background opacity hover for Folders on mobile.

shearerviljoen

Hey Guys, on my website www.shearerviljoen.com I have my folders appearing exactly how I want them to on desktop. Which is, there is no background over the images, but on hover, a transparent background appears with text displayed for the title of each folder.

My issue is, on mobile, I want the exact same to happen. But instead, all folders always have the transparent background with text displayed. I've also tried tweaking the CSS slightly, but couldn't come right. So I've reverted it back to how it was so you can see what is happening.

So as is, this is the custom CSS I have applied to "All Folders"

.sm-user-ui .sm-tile-content > .sm-tile-info {background: rgba(0, 0, 0, .50);}

.sm-user-ui .sm-tile-info .sm-tile-title {
  font-size: 40px;
  font-weight: 1;
  color: #efc525;
  font-family: 'Lato', sans-serif;
  fontStyle: Thin;
  text-transform: uppercase;
  letter-spacing: 3px;

}

@media (max-width: 736px) {

  .sm-user-ui .sm-tile-content > .sm-tile-info {background: rgba(0, 0, 0, .50);}


  .sm-user-ui .sm-tile-info .sm-tile-title {
  font-size: 25px;
  font-weight: 100;
  color: #efc525;
  font-family: 'Lato', sans-serif;
  fontStyle: Thin;
  text-transform: uppercase;
  letter-spacing: 9px;

}

How can I resolve this issue to have the mobile Folders appear and act the same as that on Desktop?

Thanks in advance,

Shearer

Hikin' Mike

@shearerviljoen said:
Hey Guys, on my website www.shearerviljoen.com I have my folders appearing exactly how I want them to on desktop. Which is, there is no background over the images, but on hover, a transparent background appears with text displayed for the title of each folder.

My issue is, on mobile, I want the exact same to happen. But instead, all folders always have the transparent background with text displayed. I've also tried tweaking the CSS slightly, but couldn't come right. So I've reverted it back to how it was so you can see what is happening.

How can I resolve this issue to have the mobile Folders appear and act the same as that on Desktop?

Thanks in advance,

Shearer

Replace what you have with this:

.sm-user-ui .sm-tile-content > .sm-tile-info {background: rgba(0, 0, 0, 0.5);}

.sm-user-ui .sm-tile-info .sm-tile-title {
  font-size: 40px;
  font-weight: 100;
  color: #efc525;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
}

@media (max-width: 736px) {

  .sm-tiles-infohover-show .sm-tile-info {opacity: 0;}

  .sm-tiles-infohover-show .sm-tile-info:hover {opacity: 1;}

  .sm-user-ui .sm-tile-info .sm-tile-title {
    font-size: 25px;
    letter-spacing: 9px;
  }

}

You had a wrong value here: font-weight: 1;. It should probably have read 100. I changed that already. You also had some duplicate stuff in your @media queries, so I removed them. Just added the opacity in your @media.

shearerviljoen

Thanks @Hikin' Mike .. You killing all the birds with one stone!!

arcentoni

I borrowed this code myself! Thanks @Hikin' Mike and @shearerviljoen !!