Image Popup On Hover

[guybower1]

hi

I am trying to have an image of a map popup on hover over a particular word, but am unable to find anything in the forums to assist.

What is the best method: using <a href with the image location and then adjusting with CSS to display only on hover?

So something like <a href="#" class="yunnan"><img src="/images/yunnan.jpg"><strong>Yunnan Province</strong></a> as the html. I read that by adding the “#” it stops the link from actually going anywhere, as all I want it to do is popup the image on hover. The html might not be 100% correct, so would appreciate any insight there.

It’s the CSS I am unsure of. Obviously targeting yunnan as the class ID, but not entirely sure what the rest would be.

Any suggestions gladly accepted

regards

[guybower1]

Hi again

I have ended up trying things a different way and have the popup working, but not the size correct.

The html is <span class="txt-hov"><strong>Yunnan Province</strong><img src="http://feastthailand.com/wp-content/uploads/2017/11/Yunnan-Province-Map.jpg" alt="" width="660" height="1100" class="img-hov"></span>

Here is the CSS I have which appears to be working OK. I just need to reposition the image:

.hov-cont {
padding:100px
}
.txt-hov {
position:relative;
}
.img-hov {
position:absolute;
top:-110px;
left:300px;
display:none;
max-width: 330px;
}
.txt-hov:hover {
color:#fe5000;
}
.txt-hov:hover .img-hov {
display:initial;
}

Sorry to have troubled you

Regards

[rad]

Hi there,

Thanks for writing in.

You may do it something like this

    .has_hover_img {
        position: relative;
        display: inline-block;
    cursor: pointer;
    cursor: hand;
    }
    .has_hover_img img {
        opacity:0;
        transition: all 300ms;
        position: absolute;
        width: 100vw;
        max-width: 200px;
        top:100%;
        left: -25%;
        border: 5px solid #fff;
        box-shadow: 1px 1px 5px #888888;
        z-index: 99999;
    }
    .has_hover_img:hover img {
        opacity:1;
    }

<span class="has_hover_img">Yunnan Province<img src="http://feastthailand.com/wp-content/uploads/2017/11/Yunnan-Province-Map.jpg"></span>

You may enhance but we can’t provide further support.

Hope this helps.

[guybower1]

Thanks for your reply, Rad

I have it working with the previous code I used, so now just to format positioning.

Thanks again

[jade]

Hi there,

Formatting the page elements using CSS especially when position absolute is used is quite tricky as it might behave different on mobile or in other screen width. Please note that this goes beyond the scope of our support as this is not elated to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.