Resize the shape of an image's polygon

Question

Resize the shape of an image's polygon

Is there a way to independently scale a specific polygon of an image on hover?

For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering.

I am familiar with using transform: scale(2) in CSS for scaling images, but I specifically want to target only a portion of the map, such as a polygon or square shape.

Is there a method to achieve this effect? It doesn't necessarily need to be done with CSS alone, JavaScript/jQuery solutions are also welcome.

The hover functionality is simple to implement with jQuery, my main question is how to selectively scale a particular section of an image. Any help is appreciated!

javascript jquery html css image

Answer 1

Answer №1

Last night was quite noisy, so I decided to create something fun to play with. This is just a rough implementation where I take the hovered part of an image and display it next to the original.

Your task is to: (0) Display the image larger than its actual size (1) Position it in front of the original using absolute positioning and z-index (2) Handle mouseout on the hovered area.

The answer linked in the comments showcases how to position elements, set their z-order, and pass pointer events to underlying map elements.

You'll need to determine where and how you want the enlarged version to appear. Maybe you'd like it at 150% size with the center point aligned with the map element's center point.

As mentioned in the comments, it's better to use an existing image rather than creating one from scratch as I've done here.

First, here's the complete source code - simply copy everything and paste it into a new HTML file.

<!DOCTYPE html>
<html>
// Source Code Goes Here
</html>

Now, there's a working demo below for you to try out right on this page (go full screen for a better experience).

// JavaScript code goes here

// CSS code goes here

<!-- HTML code goes here -->

Answer 2

Last night was quite noisy, so I decided to create something fun to play with. This is just a rough implementation where I take the hovered part of an image and display it next to the original.

Your task is to: (0) Display the image larger than its actual size (1) Position it in front of the original using absolute positioning and z-index (2) Handle mouseout on the hovered area.

The answer linked in the comments showcases how to position elements, set their z-order, and pass pointer events to underlying map elements.

You'll need to determine where and how you want the enlarged version to appear. Maybe you'd like it at 150% size with the center point aligned with the map element's center point.

As mentioned in the comments, it's better to use an existing image rather than creating one from scratch as I've done here.

First, here's the complete source code - simply copy everything and paste it into a new HTML file.

<!DOCTYPE html>
<html>
// Source Code Goes Here
</html>

Now, there's a working demo below for you to try out right on this page (go full screen for a better experience).

// JavaScript code goes here

// CSS code goes here

<!-- HTML code goes here -->

Answer 3

Answer №2

If I had the chance, each country would have its unique image that could be resized when hovered over. Image effects can be tricky to implement with JS/jQuery/CSS, so a good alternative would be to explore libraries that can assist you in achieving this effect.

One possible solution is to check out Pieces, which offers a variety of image effects for customization.

Alternatively, you could consider using canvas or svg to draw your map and make it interactive through JavaScript programming.

Answer 4

If I had the chance, each country would have its unique image that could be resized when hovered over. Image effects can be tricky to implement with JS/jQuery/CSS, so a good alternative would be to explore libraries that can assist you in achieving this effect.

One possible solution is to check out Pieces, which offers a variety of image effects for customization.

Alternatively, you could consider using canvas or svg to draw your map and make it interactive through JavaScript programming.

Resize the shape of an image's polygon

Answer №1

Answer №2

Similar questions

Switch out 2 Bootstrap columns for 2 concealed columns with just a click. Utilizing Rails 4 and Bootstrap

Experiencing difficulty retrieving individual :id information from a list in MEAN stack

Executing the AngularJS nested controller only once

What causes the discrepancy between a website's source code and the code viewed in the browser inspection tool? (Regarding web scraping)

Tips for sorting/merging/consolidating data in Angular

Is there a way to transfer gulp.watch() to a pipe?

Looking to achieve a mouse over effect in jQuery?

Tips for making a range slider in react-native

Using jQuery's $.ajax() function to make an asynchronous request, and then passing the

Checking email existence through remote jQuery validation

Issue with GMap Compatibility on Specific Web Browsers

What is the best way to include a file attachment using a relative path in Nodemailer?

Acquire HTML table information in array format using JavaScript

The controller remains unresponsive when attempting to activate the button on the webpage

Tips on including variables within quotation marks in JavaScript

Updating a Parent component from a Child component in React (Functional Components)

Mac users may experience lag when using Javascript parallax effects

When trying to log the parsed JSON, it unexpectedly returns undefined even though it appears to be in good

Cease the audio from playing unless you are actively hovering over the image

Encountering an issue while attempting to test geolocation functionality in the web browser