Hotspot Hover Size

Hi there, I am wondering if you can suggest how to use the above mentioned

.responsive .av-image-hotspot{
height: 54px;
width: 54px;
line-height: 54px;
}

and how to center the hotspot into the middle of the sizing…… Right now the hotspot image is in the top left of the hover area.

Cheers
Josh

Hey Josue I’m currently just playing with a design idea on a local host so have no link for you. But basically I have a large image that will be the landing page and it looks like a video game map. I have hotspots on the different places on the map, and I’m just trying to make the area of the hotspot that is an active link bigger to cover the whole name (menu item) on the map. I’ve used the code above and it worked but the hotspot is not in the middle of the larger hover area. It is positioned to the top left or the hover area and need to figure out how to center it.

Cheers
Josh

Hi Basilis
I just tried both but neither of them fix the positioning of the clickable hover area in relevance to the actual hotspot circle on the image. The circle for the hotspot is still aligning to the far upper left corner of the clickable hover area.

Cheers
Josh

http://pastebin.com/HNW0x4Fb

http://postimg.org/image/3zxo5r13z/

You can not see my cursor but I can click anywhere below or to the right of each hotspot (within 100px). But above or to the left is not clickable. I am trying to figure out how to get the hotspot icon to be centered in the middle of that 100px radius. I hope that makes sense.

Cheers
Josh

• This reply was modified 9 years, 5 months ago by apps2go.