Hi Armin
Here's my custom code for for desktop and mobile - I have built separate layouts for the slideshow, shop and profile pages for the mobile
and this source code is written within project description of my shop images (desktop)
<p><img class="aligncenter" src="http://tobyneilan.com/wp-content/uploads/2019/01/BUY.png" /></p>
Desktop css
.type-project .sitetitle{
display: none;
}
.hide-info {
display: none;
}
.show-infos {
display: block !important;
}
.type-category .descr{
display: none !important;
}
#lightbox-region #lightbox-inner.cursor-left img,
#lightbox-region #lightbox-inner.cursor-right img,
.cursor-left,
.cursor-right,
body,
a,
.lightbox-css-on #lightbox-region .close-lightbox,
.lightbox-css-on #main-region .col[data-type="img"] img,
.scrolltotop,
a{
cursor: url(http://tobyneilan.com/wp-content/uploads/2019/01/dot_arrow_pink.png) 17 17, auto !important;
}
body {
cursor: url(http://tobyneilan.com/wp-content/uploads/2019/01/dot_arrow_pink.png) 17 17, auto !important;
}
.col.above{
transform: translateY(-90px);
opacity: 0;
}
.col.below{
transform: translateY(90px);
opacity: 0;
}
.col.transition-in{
transform: translateY(0);
opacity: 1;
}
.col{
transition: transform 0.5s cubic-bezier(0.165, .84, .44, 1), opacity 0.5s cubic-bezier(0.165, .84, .44, 1);
}
Mobile css
.burger{
display:none;
}
.hide-info {
display: none;
}
.show-infos {
display: block !important;
}
.col.above{
transform: translateY(-90px);
opacity: 0;
}
.col.below{
transform: translateY(90px);
opacity: 0;
}
.col.transition-in{
transform: translateY(0);
opacity: 1;
}
.col{
transition: transform 0.5s cubic-bezier(0.165, .84, .44, 1), opacity 0.5s cubic-bezier(0.165, .84, .44, 1);
}
jQuery
<script>
jQuery(document).on("hover", ".info", function(event) {
jQuery(".hide-info").toggleClass("show-infos");
});
</script>
<style>
.scrollto{
cursor: pointer;
}
</style>
Thanks
Toby