Adjusting the size of a bug while hovering over a specific div

Having recently started learning HTML & CSS, I have a question regarding creating a box that scales from 1.0 to 0.8 when hovered over with the mouse.

The scaling works perfectly when hovering in the middle (0.0 to 0.8) of the box.

However, when hovering between the 0.8 and 1.0 areas, it behaves erratically whenever I move my mouse.

I want the box to scale to 0.8 when hovering anywhere within the 1.0 area at any point in time. It should return to its original size of 1.0 upon exiting the specific 1.0 region, not any other part. I'm struggling to figure this out on my own.

Test it or see it: https://jsfiddle.net/cyLxLbya/

YouTube Video: https://youtu.be/4MT4hrK7DVE (left is between 0-0.8, right goes crazy between 0.8-1)

htmlcsshover

Answer №1

The issue here lies in the scroll event triggering and blurring while the element is scaling. The problem arises when detecting a :hover state, as the element loses it when it shrinks too much and tries to scale back up again repeatedly. One potential solution is to detect the hover on a parent element that does not undergo scaling. Here's an example: https://jsfiddle.net/cyLxLbya/1/

.box{
    display: inline-block;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0px 0px 83px -8px rgba(0,0,0,0.75);
    transition: all 200ms ease;
    transition-duration: 0.2s; 
}

.hover:hover .box{
    transform: scale(0.8);
    box-shadow: inset 0px 0px 24px 0px rgba(0,0,0,0.75);
}

Additionally, it is recommended to move the transition effect to the box itself rather than the hover state of the box.

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

Toggle Visibility of Elements with Javascript and Html

I've been working on implementing a "Show All / Hide All" feature. Currently, clicking on the text opens the image and text individually. However, I am looking to add a functionality for expanding all divs at once. To see how it currently functions, ...

javascriptjqueryhtmlhideshow

Why do HTML elements in an email have strange prefixes added to their IDs?

Currently, I am working on setting up automated tests for my service that automatically sends email reports. The objective is to verify the accuracy of data in the emails. To accomplish this, I have started assigning unique IDs to different HTML elements ...

htmlemailselenium-webdriverhtml-email

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

I'm attempting to transfer the textbox value from Page-1 to Page-2 using the code below, but I am encountering difficulties. Page-1.html <div > <div style="height: 400px"> <h2>Partial view-1</h2> <p> ...

c#htmlangularjsasp.net-mvcangular-ui-router

Clear SELECT After Submission

I have a jQuery script and need a function to reset the SELECT input after it has been submitted. <script> $(document).ready(function() { //elements var progressbox = $("#progressbox"); var progressbar = $("#progressbar"); var statustxt = ...

javascriptjqueryhtml

How to make a checkbox list appear bold when checked in AngularJS?

<div class='someClass'> <label ng-repeat="item in itemList"> <input type='checkbox' checklist-model='itemCheckList' checklist-value='item.name'> <span class=& ...

htmlcssangularjs

Tips for implementing border-radius on Internet Explorer 8:

Similar Question: How to create rounded borders in IE8 using CSS? I typically use css border-radius for the design of my webpages. While they display well in Firefox, I am facing compatibility issues with IE8. Can anyone offer any assistance? Thank yo ...

internet-explorer-8bordercss

Aligning cards

Struggling to align these cards perfectly at center: Despite thorough research on both Google and Stack Overflow, the solution continues to elude me. I've experimented with various methods such as display: flex, justify-content: center, and align-ite ...

htmlcenteringcard

Efficiently Displaying Multiple HTML Elements in React Native WebView

I am currently working on developing an Epub reader in React Native and facing a challenge. I need to find a way to efficiently transfer multiple html content files from the Epub container to the webview in order to achieve seamless pagination. ...

javascripthtmliosreact-nativeepub

How to Populate Radio Buttons in HTML with Data from a MySQL Database

I am seeking assistance with a PHP and MySQL project since I am new to these technologies. Any help would be greatly appreciated! I have created a second table that contains inventory information. This table includes two columns: Manufacturer and Item. O ...

phphtmlmysqldatabaseradio-button

Styling CSS to place an image in between text and background coloring

As I try to replicate a happy accident of mine, which originally occurred during my first attempt at CSS: I was just randomly adding selectors when I stumbled upon this unique layout. However, as I proceeded with rewriting the file, I failed to save the o ...

htmlcss

Picture featuring a right-angled triangle on the right side

I have been experimenting with creating a complex image effect using CSS only, without any JavaScript. Despite several attempts, I haven't been able to achieve the desired outcome yet. CSS .container{ width: 500px; background-color: #0c2f45; ...

csscss-shapes

Screen readers are unable to "read" text that is identified through aria-describedby

When enhancing my web application for accessibility, I encountered a challenge. I have implemented two required fields in a form that should display separate error messages as spans. To accomplish this, I am utilizing aria-invalid to signal when the fields ...

javascripthtmlaccessibility

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Is there a way to achieve text wrapping like this using semantic and clean HTML and CSS that is compatible with all browsers? The only solution I can think of is adding different classes to the <p> element. However, the drawback of this approach is ...

jquerycssxhtml

Conceal the frontview-specific attribute if the custom attribute value is empty

One of my recent projects involved creating a custom attribute value to display an external link on the product view. I used a custom attribute as a button that connected to my public marketplace store, such as Lazada. However, I encountered an issue when ...

phphtmlmagentoattributesmagento-1.9

Creating a table from a PHP associative array

I've been attempting to organize an associative array in ascending order and then display it in an HTML table, but I've hit a roadblock with an error. I tried searching for solutions here on SO and followed the advice provided in some threads: P ...

phphtmlarrays

Modify input value using jQuery upon moving to the next step

When you type into an input[text] and press the tab button, it automatically moves to the next input. If you fill out all the inputs and then want to re-fill them, the values will be highlighted in blue. However, I wanted to achieve this without having to ...

javascriptjqueryhtmlinput

In what ways can CSS be used to create a smoother edge effect on images?

After attempting to add an image to my website, I noticed that its edges appear quite rough. https://i.sstatic.net/Xol9R.png(Note: In the image above, you can observe the jagged surface around the berry). This issue arose when I eliminated the background ...

cssimage

Rotate arrows by 90 degrees instead of 180 degrees in Bootstrap 5 Accordion

I have customized a Bootstrap 5 Accordion according to the guide provided at https://getbootstrap.com/docs/5.0/components/accordion/. The default behavior rotates the arrows 180 degrees when an item is opened, changing from 'v' to '^'. ...

javascriptcssbootstrap-5bootstrap-accordion

Use JavaScript to overlay drawings onto an existing image

Within this particular image, I possess a compilation of pixel coordinates outlining the polygon segments that encompass all the objects contained within it (refer to the image provided below). For example, in relation to the individual, there exists a li ...

javascriptjqueryhtmlimagecanvas

"Maximizing Bootstrap Functionality with Angular 2: Step-by

I'm experiencing an issue with Angular2, Bootstrap 3.3.7, and Bootstrap Plugins. I have imported all the necessary stylesheets and JavaScript files in the 'index.html' file. Below is the snippet from the index.html: <!-- Bootstrap & ...

csstwitter-bootstrapangularpluginstwitter-bootstrap-3