Hide info when hover over image Beatslinger2

Good afternoon

I am using the Beatslinger2 skin.

The code is found in the index_item_1.tpl file...

what I would like to do is make *the play button and any info (ex title and by whoever show)* display only when you hover over the item image on the home page

***On the mobile function its already displaying the play button and (ex title and by whoever show)* without the hovering...what can I remove from the css to hide it and only display when you touch the image so everything can react the same on all platforms (desktop table mobile)



I want the reaction to be the same on all platforms (desktop, tablet, mobile)
Hover over image and display button and info
Thank you
Zam

updated by @jamjoint: 02/29/24 07:00:41PM

There is no hover on mobile. on desktop there is a hover because the mouse pointer can be over the item but not clicking it, but on mobile the phone doesn't know your finger is over the button until the button is clicked on.

Hi Michael you absolutely right on the mobile there is no hover I should had used my wording more correctly..I guess I got stuck with the word hover.
So with mobile I would like the play button and info to display when touched / click on kind of like the Elastic2 skin..(honestly it doesn't have to do a 360 spin..lol just to open when touch / click image on mobile.
This morning..im trying to browse the Elastic2 skin.css file and see what's the difference between that and the Beatslinger2 skin.css surrounding the image

There's a bunch of different ways to do anything. If you like the way the elastic skin does it, yeah, grab its code and work it into your skin.

There's also another module that I've not used much lately but its purpose is to guide around and introduce parts of the page then the user clicks "ok" and the note bubble goes away, I forget what its called right now and cant seam to locate it.

Another way to do things is to add a class then use jquery to toggle it hidden and visible like

Thanks Michael for continuing to look into it
..the toggle / hidden is a good way for me to use something that I can add ..thanks for that code will be very useful.

I did some backtracking and I found the first Beatslinger skin and compare it with Beatslinger2 ..

so the first skin Beatslinger (original) when it comes to the homepage when you are on mobile you do have to click on image to display -
1.both the title and by who the song is created by
2. the play button..
.***which is how I wanted it***

The Beatslinger2 on mobile display the Info and play button without having to click on it

I knew something was abit different for the info and play button. both skins the Beatslinger original and the new skin
The Beatslinger2....

So yes I'm using Beatslinger2 but trying to get it to work as Beatslinger (original) when on mobile
You need to click on image to get info and play button..i feel that works better for what I'm trying to do
updated by @jamjoint: 03/10/24 10:16:57AM