Text following mouse cursor on hover to show only for desktop
-
Hey everyone, I added this jquery to my site in order to have the project name following the mouse on hover:
<script>
var windowWidth = window.innerWidth;
if(windowWidth > '1024') {
jQuery(document).bind('mousemove', function(e){
jQuery(".titlewrap-on-image").offset({left: e.pageX, top: e.pageY});
});
}
</script>@media (min-width: 1024px){
.thumb:hover .titlewrap-on-image {
display: block;
position: absolute;
}.titlewrap-on-image {
display: none;
font-family: "Dela Gothic One";
font-size: 30px;
text-decoration: underline;
color: white;
position: absolute;
z-index: 1000;
}
}I'd like to have the project title displayed above the thumbnails in both tablet and and mobile but I have no idea on how to achieve it. I have a basic knowledge of CSS and absolutely 0 of Js (I found the script online and adapted it to my site with CSS).
Can anyone pls help?