Hover On Mobile (Portfolio Grid)

Last Updated: Jun 27, 2017

As there is no hover state on mobile, informations like the title & category, which appear on hover, will not get displayed on mobile devices. There is also no solution to force this state, as we’ve removed the class completely. But there is a solution, which can be helpful.

 

[Please be aware that we can’t give support for this kind of customization, we highly recommend to only use this code if you are familiar with HTML & CSS and you are able to fix possible upcoming ‘problems’ yourself! ]

 

You can display the title & category below the thumbnails on mobile only, but you will need some CSS for that.
Please aware that if you are using a fluid grid layout without a gutter, there will be a gap between your thumbnails, it would require further CSS to fix it, which is not a part of this tutorial.

 
  1. First of all, make sure to enable the title & category below the thumbnails by default.



     

  2. Now navigate to ‘Semplice → Advanced Styling → Custom CSS & JS’ and scroll down Media Queries.
     

  3. You will see a variety of screen resolutions (Desktop, Table Landscape ..). Now paste following code to the code field of the resolutions you want the title & category to be hidden. In our example I just want the title & category to be hidden on Desktop.

    CSS: section#thumbnails .thumb h3.thumb-title { display: none; }

  4. Now save everything and the title & category will be hidden on desktop resolutions.

17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
http://assets3.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete