Any idea for making image hotspot (WP) - wordpress

For Wordpress, how can I make it like https://store.google.com/us/category/connected_home
Hotspot info, Top-tab for changing the spot. Can be made with slide revolution?

Inspect the page. They've positioned the elements with percentage based left and top values.
If I was to build something like this, I'd use javascript to hide and show the various labels when I click the menu tabs. And I'd add CSS animations so they transition in like in your example.

Related

Can i make tree graph where button means leaf?

id like to do something like tree graph with buttons. Idk how to explain my idea so ive created image. I build my website via Elementor. Is it even possible please?
My image
You can do this in one section using buttons and dividers, set width for the divider, and set it using margin and padding

Anchor Tag doesn't work because of animation

Goal: I need to set anchor tags for the wordpress-site: http://joy-academy.eu/programs/
I am using Visual Composer and there is some animation.
Problem: If I try to set an anchor tag, it scrolls to the right place but does not show the previous parts that are animated like here:http://joy-academy.eu/programs/#example or if I use a Plugin "scroll to Id", it just scrolls to a random place, like for example here: http://joy-academy.eu/programs/#cc
Details: The Wordpress Theme is "Zyen". Ref: https://themeforest.net/item/zeyn-multipurpose-wordpress-theme/8848292
Thanks for your help!
I see that your site is using the Zeyn theme.
That's the first place to look for coding style changes. Here's a demo example doing what I think you are hoping to achieve. http://djavaweb.com/selector.php?theme=zeyn-classic
This means don't use the button for an anchor. So, use the Extra id in the rows to correspond with the anchor link (#example).
Here's the directions to do this; just start after the steps about the menu items.
http://kb.detheme.com/knowledge-base/zeyn-faq-one-page-navigation/

Bootstrap navbar style change on toggle

I am using a WP theme(bootstrap). When resize my window to mobile view, i see a button of toggle menu (3 horizontal lines). On clicking it, i see a drop down type list of pages.
I want to change that drop down to open like right to left.
Just like this : Here is the link
How to change the dropping style from [top To Bottom] to [Right To Left]?
I think you might need to look at Bootstrap's 'off-canvas' menu. Unfortunately it's not just a simple change from top to bottom to right and left but it's quite straight forward to achieve using this demo example.
https://getbootstrap.com/examples/offcanvas/

Ionic Platform custom midle tab

So i having problem to customise in bottom tabs the middle, i want to make middle tab height bigger then other tabs, so i cant find the way to customise it. It would be nice if there would be somebody that can help with this.
Link for editing link. And wanted result image.
Tried separately change the hight but, there are a feeling that flex box doesn't allow to tab go out of content.
Inherit the CSS class that holds the icon in the middle and add your custom properties.

Div mouseover on a specific location on an image

I am currently building a fluid layout website, so that when the screen resolution changes, the site changes with it, no need for individual resolution css etc.
But the problem i am having is with the navigation bar, i want to have one image with the labels (Portfolio, Blog and About), when the mouse moves over each of those labels the whole nav bar changes to another navbar image, one with different coloration to indicate the mouse is on a specific label, each label needs to be a link too (obviously).
To try to clarify, i essentially need a div mouseover event on a specific location on an image, but as mouseover events donĀ“t exist i would have to use :hover in css, but how do i get the image to change in css? Perhaps setting the original navigation bar image as the background image, but how do i overlay the next image and get it to activate on a specific hover location? image mapping?
regards,
Jimy

Resources