Background opacity hover for Folders on mobile.

shearerviljoenshearerviljoen GermanyRegistered Users Posts: 37 Big grins

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

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,077 Major grins

    @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.

  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 37 Big grins

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

  • arcentoniarcentoni Los AngelesRegistered Users Posts: 27 Big grins

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

Sign In or Register to comment.