changing size when hovered over with the mouse is not consistent between entering and exiting

Hi there, I'm currently utilizing the transform: scale(); property on a website and could use some assistance with a particular issue I haven't been able to find an answer for online.

Here is the code snippet I'm working with: HTML:

<div class="hopp_circle_img">
   <img src="..." alt="" />
</div>

CSS:

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
.hopp_circle_img img:hover {
  display: block; 
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

The current effect works well, but I have been tasked with creating a different scaling behavior when the cursor enters versus exits. For example, scaling quickly on mouse-in but slowly on mouse-out. Is there a solution for achieving this using CSS3 or Javascript?

Thank you, rabox

javascriptcsstransform

Answer №1

Create a design with a slow transition effect for the element (.hopp_circle_img img), and a faster transition effect when it's being hovered over (.hopp_circle_img img:hover). This way, once you move away from the element, the slower transition will take place.

The transition shorthand property has been defined with varying duration and easing options. Feel free to adjust the transition-duration, modify the transition-delay, or choose a different transition-timing-function (easing).

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}
.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
<div class="hopp_circle_img">
  <img src="https://65.media.tumblr.com/avatar_39c12973e9fe_128.png" alt="" />
</div>

Answer №2

After posting, I quickly found a solution to my issue. It turns out that changing the transition time on :hover fixed the problem. Here is an example:

.hopp_circle_img img {
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
.hopp_circle_img img:hover {
  display: block; 
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: transform 2s;
  transition: transform 2s;

}

}

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

Error Checking in AngularJS Form Submission

According to my form.json file, I have a form that needs validation and a simulated submission. Firstly, I need to address this issue: fnPtr is not a function Next, I want to submit the form to a mocked API endpoint that will return true or false. Can I ...

javascriptangularjsjson

When extracting information from a table within a Vue.js and Vuetify.js function

When trying to display a table, only one row is being printed. How can I resolve this issue? I have attempted various solutions (Vanilla JS worked). This project is for educational purposes and I am relatively new to JS and Vue.js. <template> < ...

javascripthtmlcssvue.jsvuetify.js

When a change is made in the parent component, the local state of the child component in ReactJS is automatically updated

I'm currently facing a challenge while implementing a custom dropdown filter for a table in react. Each column has a set of dropdown values with an Apply button. To handle this, I've created a child component that takes the dropdown values and s ...

javascriptreactjsreact-hookssetstatereact-table

Transfer only certain directories located within the primary directory

Imagine having a main-folder, which contains folders of type my-folder-x. Within these my-folder-x folders, there are subfolders and files. -main-folder -my-folder-a -build-folder -demo-folder dummy.js dummy.css my.json -dummy-folder - ...

javascriptnode.jsbashshellunix

Identifying and handling errors in the outer observable of an RXJS sequence to manage

Encountered a puzzling rxjs issue that has me stumped. Here's the scenario: I have two requests to handle: const obs1$ = this.http.get('route-1') const obs2$ = this.http.get('route-2') If obs1$ throws an error, I want to catch it ...

javascripttypescriptrxjs

Scrolling infinitely in every direction - both upwards and downwards

I'm currently working on a page that I want to have an endless scrolling effect both up and down. Right now, I am using jQuery to move content from the top of the page to the bottom. This gives a smooth loop when scrolling down, but I also want it to ...

javascriptjqueryhtmlscroll

Variable in v-for loop is not properly declared

Currently, I am attempting to iterate through an array of objects retrieved from the backend and display these objects on the frontend. The Vue framework is throwing an error stating that "event" is not defined on the instance but referenced during render. ...

javascriptvue.js

Send binary information using Prototype Ajax request

Currently, I am utilizing Prototype to send a POST request, and within the postdata are numerous fields. One of these fields contains binary data from a file, such as an Excel spreadsheet chosen by the user for upload. To retrieve the contents of the file ...

javascriptajaxprototypejsfilereader

Using v-model to dynamically update the router based on certain conditions

Check out this demo showcasing a navigation menu with nested items. Clicking "more" reveals the expanded list, which can be set to always open using v-model="item.model" with model = true. My goal is to have the submenu stay open only when the user is on ...

javascriptvue.jsvuetify.js

Why is the button missing from the codepen?

I attempted to recreate the code from this Codepen link: https://codepen.io/jakaric/pen/mjJQvg However, unlike what you see here (in the run result), the liquid "Pretty little button" is not showing up in my local files. On Codepen, there is no library me ...

javascriptbutton

Issue with Thickbox - showing up towards the end of the page

I'm encountering a strange issue with a PHP page in Wordpress. When I include an inline Thickbox on the page and try to open it, the Thickbox appears at the very bottom of the page, below the footer. Interestingly, I copied the generated HTML code an ...

javascriptcsswordpressthickbox

Leverage the power of puppeteer alongside webpack

Struggling to make puppeteer work with webpack? Despite adding it to package.json and configuring webpack.dev, the 'launch' function still throws errors. Here's what I've tried: Installed dependency in package.json: npm i puppeteer In ...

javascriptnode.jsnpmwebpackpuppeteer

Displaying files based on time signatures using NodeJS with a delay

I have 6 levels of user tiers. Each tier has a different time delay in viewing posts: 1st tier: See posts immediately upon posting. 2nd tier: See the same post after 60 minutes 3rd tier: See the same post after 120 minutes 4th tier: See the same post af ...

javascriptnode.jsmongodbdatetimemongoose

Tips for reducing the amount of white space on a card featuring a pie chart in a mobile layout

Is there a way to adjust the size of the pie chart or reduce the white space at the bottom? In the mobile view after inspecting with Chrome dev tools, it seems like the chart is not displaying as desired. Here is the screenshot <div ...

cssbootstrap-4chart.js

What is the best method for combining this function?

Currently, I am working on a code snippet that generates a sitemap.xml file when the /sitemap.xml endpoint is accessed. database = firebase.database(); var ref = database.ref('urls'); ref.on('value', gotData, errData); fu ...

javascriptangularjsarraysnode.jsexpress

I am struggling to send an email using PHP mailer with POST data

i'm facing challenges with integrating phpmailer and ajax. As a beginner in ajax, I still have some gaps in understanding the concept. When I directly run my php mailer script on a page with preset values, I can successfully send out an email. However ...

javascriptphpjqueryajaxemail

What is the best way to remove the excess numbers from the return date provided by the react-date-picker?

I need help displaying only the Month and Day with the format "Tue Oct 22 2019". Currently, I am getting "Tue Oct 22 2019 00:00:00 GMT-0700 (Mountain Standard Time)" when using "react-date-picker". How can I achieve this without having to truncate the te ...

javascriptreactjsreact-datepicker

Avoiding "Origin null is not allowed" error in Express.js POST request

I am attempting to send JSON data containing a set of key and values from JavaScript to Express.JS. Following advice from other posts, I have included the use of CORS and also added res.header("Access-Control-Allow-Origin", "*");. When testing the POST r ...

javascriptnode.jsexpress

yet another scenario where the component's state changes without the component reflecting those changes

My react component includes a state variable called: showEditor When showEditor is set to false, the component should display a div containing a number (initially showEditor is false). If the state variable is true, the component should display a textbox ...

javascriptreactjsjsx

Error: Encountered an unexpected token F while trying to make a POST request using $http.post and Restangular

In our current project, we are utilizing Angular and making API calls with Restangular. Recently, I encountered an error while trying to do a POST request to a specific endpoint. The POST call looked like this: Restangular.one('aaa').post(&apos ...

javascriptjqueryangularjsdrupalrestangular