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!

javascriptjqueryhtmlcssimage

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to personalize the Carousel-indicators feature within react-responsive-carousel?

I am currently utilizing the react-responsive-carousel library. I would like to modify the default indicators CSS, changing the dots shape to a line shape. Here is my code snippet: <CarouselWrapper sx={{ marginTop: "124px", maxHeight: & ...

cssreactjsresponsive-designnext.jsreact-responsive-carousel

Having trouble with PHP when using JQuery Ajax to post data

Currently, I am working with a list of records retrieved from a MySQL table. Each record has been assigned an onclick function to pass data for further database queries without having to refresh the page. <a href='javascript:void(0)' onclick= ...

phpjqueryajaxpost

Dynamic forms with live updates in Django

I have a vision for my website where I want to incorporate a dynamic form that can be accessed and updated by multiple users simultaneously. The idea is that as one user makes changes to the form, those updates are immediately visible to all other users wi ...

jquerypythondjango

Troubleshooting issue with image dimensions in Angular within CKEditor content

One issue I am facing is with CKEditor, where images inserted into Rich Text Fields have their height and width attributes set in a CSS style tag. For example: <img alt="" src="https://something.cloudfront.net/something.jpg" style="height:402px; ...

htmlcssangularckeditor

Tips for eliminating the menu bar in the external window generated by an Electron application's URL

Looking for a solution to remove the menu bar from a window that opens with an external URL in an Electron application? Check out the code snippet below: windowObject.webContents.setWindowOpenHandler(() => ({ action: 'allow', overrideBrows ...

javascriptreactjselectronmenubarelectron-react

Tips for expanding a flex-grow element to fill the area of a concealed flex item

I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space. My layout works perfectly ...

htmlcssflexboxhidden

What could be the reason for the malfunction of my callback function?

This particular function is executed with the command node server const express = require("express"); const app = express(); const fs = require("fs"); const connectDb = require("./config/db"); const __init__ = (local = false) => { fs.writeFile( ...

javascriptnode.js

Having issues with the environmental value not functioning properly within the .js file for Next.js

Currently, I am in the process of testing an app that features a widget which relies on an API key within a script. This script needs to be placed within my <head> tags. My .js file is located in my public folder and is being imported into my layout. ...

javascriptnext.jsenvironment-variables

Tips for containing a range slider within a div element in a flexbox container

I am currently using Javascript to generate a grid of images, and I want to include a range slider at the bottom of one of the images. Here is a simplified version of my code using flex-container: <style> .flex-container { display: flex; fle ...

javascripthtmlcssflexbox

Empty ng-repeat iteration despite the presence of HTML elements

After receiving a list of numbers from an API, I am using ng-repeat to display them on a web page. However, even though 10 elements are created for 10 numbers, the content is empty. Despite trying various combinations, I am unable to get the content to dis ...

htmlangularjsangularjs-ng-repeat

The array containing JSON objects enclosed within curly braces is causing a syntax error

Given a variable containing data that looks like an "array" with JSON Objects inside (even though it is not actually formatted as an array, starting and ending with curly braces): {"x1","x2"},{"y1","y2"},{"z1","z2"} How can I transform this so that the i ...

javascriptarraysjson

Execute another ajax call based on the response received from the initial ajax request

I have a header file with a search box where users can search for products using an ajax request. The search results are retrieved from the livesearch.php file. Now, I want to add an 'Add to Cart' button next to each searched product. This button ...

phpjqueryajax

ReactJS Error: The property 'hubConnection' is not defined on type 'JQueryStatic'

I am currently working with the Signalr library in React, but I keep encountering the following error: Property 'hubConnection' does not exist on type 'JQueryStatic'. Is there a solution to this issue? declare var window : any; import ...

jqueryreactjstypescriptsignalr

Designing Material UI Button Styles

Hello, I recently started using Material UI and I'm facing some challenges in styling the components. Right now, I'm working on a sign-in page and trying to position the Submit button all the way to the bottom right corner. Any help or advice wou ...

cssreactjsmaterial-ui

How can I determine the appropriate time to hide the loading screen after the model has been loaded with gltfLoader and before the scene is rendered?

I am currently working on a project using threejs version 106, where I have integrated both the webGLRenderer and CSS2DRenderer. My main challenge lies in loading a glb model and displaying a loading progress bar utilizing the onProgress callback of the l ...

javascriptthree.jsloadergltf

Encountering a 404 Error When Making an Ajax Request in Spring MVC

Looking to implement a basic login form using Spring MVC and an APIResponseModel class with Status, Message, HTTPStatus variables. After submitting the credentials, receiving a 404 ajax response, although the Controller returns {"status":"20 ...

javascriptajaxformsspring-mvcauthentication

"Standard" approach for a Date instance

During my time in the Node REPL environment, the following output was displayed: > console.log(new Date()) 2023-08-15T09:21:45.762Z undefined > console.log(new Date().toString()) Sun Aug 15 2023 09:21:50 GMT+0000 (Coordinated Universal Time) undefine ...

javascriptnode.js

Importing multiple modules in Typescript is a common practice

I need to include the 'express' module in my app. According to Mozilla's documentation, we should use the following code: import { Application }, * as Express from 'express' However, when using it in TypeScript and VSCode, I enc ...

javascripttypescript

Exploring the HTMLUnknownElement using jQuery.find() and an XML file

Trying to load an XML document (specifically, an RSS feed) through an Ajax request to parse and incorporate information into my webpage. Surprisingly, the code functions properly in Firefox, Opera, Chrome, and Safari but encounters issues with IE7. Upon i ...

jqueryxmlajaxinternet-explorer

Output JSON data to an HTML5 table

Here is a code snippet to retrieve data: function fetchInformation(){ $.get('http://mywebsite.net/getFile.php', function(data) { var result = JSON.parse(data); } The returned JSON data is as follows: Object {0: "11", 1: ...

javascriptphpjsonhtml