Separate the circular image into four equal sections

Imagine having an image like this:

https://i.sstatic.net/FYKSB.png

Now, imagine wanting to make the slices of the circle enlarge when the mouse hovers over them while the rest of the circle blurs out.

I've tried using Javascript, JQuery, and CSS but can't seem to figure it out. Mapping the image might work, but I'm not sure how to achieve my desired effect.

The circle image consists of 4 different colored slices, which could be separate images combined in Photoshop or displayed using HTML to create a circular shape.. Either solution works for me.

Thanks in advance and apologies for any language issues! >_>

javascriptjqueryhtmlcss

Answer №1

You have the ability to achieve this using only CSS! 😄

All you need to do is create a wrapper that contains the four quarters of the circle. By setting different border-radius values on each quarter, you can form the circular shape. When you hover over the element, you can adjust the size using the transform property with scale() and control the blur effect by changing the opacity within the .wrapper:hover .quarter selector.

div.wrapper { position: relative; width: 100px; height: 100px; border-radius: 50px; }
div.quarter { position: absolute; width: 50px; height: 50px; background-color: #333; transition: transform .5s, opacity .5s; }
div.quarter.left-top { left: 0; top: 0; border-top-left-radius: 50px; }
div.quarter.right-top { left: 50px; top: 0; border-top-right-radius: 50px; }
div.quarter.left-bottom { left: 0; top: 50px; border-bottom-left-radius: 50px; }
div.quarter.right-bottom { left: 50px; top: 50px; border-bottom-right-radius: 50px; }
div.wrapper:hover div.quarter { opacity: .5; }
div.quarter:hover { opacity: 1 !important; transform: scale(1.5) }
<div class="wrapper">
  <div class="quarter left-top"></div>
  <div class="quarter right-top"></div>
  <div class="quarter left-bottom"></div>
  <div class="quarter right-bottom"></div>
</div>

Answer №2

Discover the magic of achieving this effect using only CSS.

Start by wrapping all four divs in a single container with the class .container, ensuring they have the same height and width. For example: 

.scale{height: 150px; weight 150px}
. To create a quarter circle shape, utilize the border-radius property. Then, customize the hover event with the following code:

.scale:hover{
  transform: scale(1.1);
  z-index: 100;
    filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
}
.container:hover .scale{
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

Check out the Demo below:

.container{
  position: relative;
  height: 300px;
  width: 300px;
}
.scale{
  height: 150px;
  width: 150px;
  background-size: cover;
  position: absolute;
  transition: 0.3s all;
}
div#one {
  background-image: url(http://dummyimage.com/150.png/09f/fff);
  -moz-border-radius: 150px 0 0 0;
  border-radius: 150px 0 0 0;
  left: 0;
  top: 0;
}
div#two{
   background-image: url(http://dummyimage.com/150.png/f00/fff);
  -moz-border-radius: 0 150px 0 0;
  border-radius: 0 150px 0 0;
  right: 0;
}
div#three{
  background-image: url(http://dummyimage.com/150.png/f60/fff);
  -moz-border-radius: 0 0 150px 0;
  border-radius: 0 0 150px 0;
  bottom: 0;
  right: 0;
}
div#four{
  background-image: url(http://dummyimage.com/150.png/000/fff);
  -moz-border-radius: 0 0 0 150px;
  border-radius: 0 0 0 150px;
  bottom: 0;
}
.scale:hover{
  transform: scale(1.1);
  z-index: 100;
    filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
}
.container:hover .scale{
  filter: blur(5px);
  -webkit-filter: blur(5px);
}
<div class="container">
  <div class="scale" id="one"></div>
  <div class="scale" id="two"></div>
  <div class="scale" id="three"></div>
  <div class="scale" id="four"></div>
</div>

Answer №3

One approach is to utilize 4 distinct images for positioning with CSS and then incorporate an onmouseover function to adjust their width and height.

For instance:

<img src='grey_quadrant' id='grey' width=100 height=100 style='position: absolute; top: 0px; left:0px' onmousover='this.width=120; this.height=120'>

<img src='red_quadrant' id='red' width=100 height=100 style='position: absolute; top: 0px; left:100px' onmousover='this.width=120; this.height=120'>

<img src='blue_quadrant' id='blue' width=100 height=100 style='position: absolute; top: 100px; left:0px' onmousover='this.width=120; this.height=120'>

<img src='brown_quadrant' id='brown' width=100 height=100 style='position: absolute; top: 100px; left:100px' onmousover='this.width=120; this.height=120'>

Alternatively, a similar effect can be achieved using SVG graphics.

To blur other quadrants upon mouseover of one quadrant:

onmousover='this.width=120; this.height=120; document.getElementById("blue").src="blurred_blue_quadrant.jpg"; document.getElementById("grey").src="blurred_grey_quadrant.jpg";document.getElementById("brown").src="blurred_brown_quadrant.jpg"'

To revert back to the original images upon mouseout:

onmouseout='this.width=100; this.height=100; document.getElementById("blue").src="blue_quadrant.jpg"; document.getElementById("grey").src="grey_quadrant.jpg";document.getElementById("brown").src="brown_quadrant.jpg"'

This method requires both blurred and unblurred versions of each quadrant image. For more advanced blurring effects, consider utilizing SVG or CSS.

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

Display a photo transitioning from black and white to color in a loading fashion, moving from left to right

Is there a way to enhance the clarity of the question's title? I have an interesting effect where text starts off in grey color and then transitions to black using keyframes in CSS with the animate property. I'm curious about how I can achieve ...

javascriptjqueryhtmlcss

Issues with pagination and navigation in Joomla when using the Swiper JS carousel with Bootstrap 5

Initially, I attempted to incorporate Swiper JS into my Joomla 4 template using Twitter Bootstrap 5. I connected it from CDN. If you visit this link: , you will see the desired layout from a Figma design: Screenshot However, I encountered some issues: A ...

javascriptjoomlacarouselbootstrap-5swiper.js

Allusion to a intricate data component

In my code, I have a model that is being represented by a class. For example, let's consider the model of a car: export class Car { public name : string; public color: string; public power : number; public service : boolean; } All c ...

javascriptangulartypescript

PHP having trouble recognizing Ajax POST requests

I am currently working on transferring data from an HTML page to a PHP page. After verifying that the dataString is indeed sending text using console log, it appears as pid=12345 Here is my AJAX code: $.ajax({ type: "POST", url: 'Task2.php&apos ...

phpjqueryajax

Responsive navigation bar elements adjust to the width of the content

Currently, I am in the process of upgrading to bootstrap 4 but have encountered some challenges. One issue I am facing is with my navbar. It currently appears like this: https://i.sstatic.net/5a4Et.png The problem lies in the fact that the right navbar-c ...

htmlcssbootstrap-4

Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Is there a way to modify the function of the button in the WordPress content textarea of TinyMCE? Specifically, I am referring to the "u" button for underline formatting. <span style="text-decoration-line: underline;">text underlined</span> I ...

htmlwordpresstinymceeditor

Unable to implement the bootstrap panel class as expected

It seems like the bootstrap panel class is not being applied in this code snippet: <div class="container main-content"> <div class="row"> <div class="col-sm-3"> <div class="panel panel-primary"> ...

csstwitter-bootstrap

Transmit a base64-encoded image in an HTTP request to the server

I am currently working on sending a base64 image using the request npm module from a nodejs/express application to another REST API endpoint. Below is the code I am using: First, I have middleware set up using multer and datauri to upload the image in mem ...

javascriptnode.jsexpressbase64multer

Setting a conditional class based on the iteration value of a loop within a v-for statement

When generating table rows using the v-for"x in y" directive, I also want to apply certain classes conditionally based on a value within the loop. For example: <tr v-for="file in fileList" :class="{ 'bg-green': file.include }"> <td&g ...

htmlvue.js

Leverage the power of JSON data in conjunction with HighCharts through

I'm struggling to understand the JSON format and HighCharts. Despite trying various techniques found on forums, I haven't been able to achieve the desired result. Here's my issue: 1- When clicking, an Ajax call is made to a PHP file that g ...

javascriptjqueryajaxjsonhighcharts

Guide on adding a unique ID for every table by inserting a div

I am currently working on a website that contains multiple tables on each page. My goal is to implement a scroll bar at the top, customized for each table. After searching online, I came across this helpful solution: http://jsfiddle.net/simo/67xSL/ I have ...

jquery

Display an image labeled as "not specified" using multer

I'm attempting to upload a picture using multer, here is my server-side code: const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './uploads/') }, filename: function (req, file, cb) { ...

javascriptnode.jsexpressmulter

Learn how to dynamically import and load components in VueJS while rendering a list

I am currently rendering a list. <div v-for="msg in messages"> <div v-if="msg.type==='component'"> <component v-bind:is="getComponent(msg.component)" :data="msg.data" :text="msg.text"></component> </div> ...

javascriptvue.jscomponents

Nodejs - how to achieve interoperability between mjs and js files through importing and requiring?

I'm fairly new to JavaScript and Node.js. Based on my research, it seems that ES6 import is not compatible with Node.js, so I've resorted to using experiment mode by renaming my file to .mjs. This workaround generally works, except when the .mjs ...

javascriptnode.js

The npm postinstall script is functional, however, it does not complete successfully and ends

I have encountered an issue while trying to solve a problem with my project. In my package.json file, I have included a postinstall script that connects to a database and calls a function to write data into it. The script seems to be working fine as the da ...

javascriptnode.jsnpm

Creating a dynamic dropdown menu that displays options based on the selection made in a previous drop

Attempting to replicate this exact functionality on my own site has proven difficult. Despite success on jsfiddle, none of the browsers I've tested seem to cooperate. Any suggestions? Even when isolated as the sole element on a page, it simply refuses ...

javascriptjqueryhtmlcss

lite-server is failing to serve the .js file located in the /js directory, resulting in the browser not sending a request

I am currently using a lite-server by running npm run lite Despite my jQuery file and CSS being loaded without issue, the browser is not even attempting to make a GET request for the main.js file. The main.js file is located in the /js folder, just like ...

javascriptnode.jsnpmlite-server

Navigate to a specific section on a different page while excluding a distance of X

I've implemented the script below to execute the action mentioned in the title. <script type="text/javascript"> var jump=function(e) { if (e){ e.preventDefault(); var target = $(this).a ...

javascriptanimationscroll

I'm feeling completely lost trying to understand cors in conjunction with fetch, particularly when an options request is

I am using whatwg fetch in the code snippet below: const headers = new Headers(); //uncommenting this causes the preflight options request to be sent //headers.append('x-something', 'foo'); const response = await fetch(&apos ...

javascriptajaxgoogle-chromecorsfetch

What is the significance of using the "why" in the href property within the

I need help understanding why the plus "+" is used before and after myUrl in the function .not. Even though it works fine with or without the +, I am curious about why it was included in the code snippet. <script type="text/javascript"> $(documen ...

javascriptjquery