---
title: "Irritating magnify effect on mouse hover"  
description: "Irritating magnify effect on mouse hover"  
author: "Anonymous User"  
published: 2013-06-15  
updated: 2013-06-15  
canonical: https://www.mindstick.com/forum/1147/irritating-magnify-effect-on-mouse-hover  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# Irritating magnify effect on mouse hover

Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances),\
I have three [link](https://www.mindstick.com/articles/23633/link-builder) enclosed with ul li tag.I want my each link to magnify when someone [mouse hover](https://answers.mindstick.com/qa/30760/how-to-change-div-color-on-mouse-hover-using-css) it. I know it can be done using [absolute](https://www.mindstick.com/interview/1159/what-is-absolute-and-sliding-expiration-in-dot-net) positioning and z-[index](https://www.mindstick.com/blog/198/index-in-sql-server). I tried something but I am not getting it right.T he [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) with my jsFiddle is the 2nd li element after magnifying takes two line.\
Can [someone help me](https://answers.mindstick.com/qa/42311/can-someone-help-me-with-this-question-about-political-parties) with it.\
Here is my [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)

```
<ul><li> <a href="#">Home</a> </li><li> <a href="#">About us</a> </li><li> <a href="#">Contact us</a> </li></ul>
```

**\**Here is my Jquery\

```
$(function(){var t = 10;$('li').each(function(e,i){    $(this).offset({top:50,left:t});    t+=100;});$('a').hover(function(){    $(this).animate({'z-index':'1','font-size':'30px'},50);      },      function(){          $(this).animate({'z-index':'0','font-size':'15px'},50);    });});
```

**\**Here is CSS :\

```
a {text-decoration:none;font-size: 15px;}ul {list-style-type:none;}li {padding-left: 50px;width:100px;text-align:center;position:absolute;}
```

**\**Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams) for any recommendations or solutions.

## Replies

### Reply by AVADHESH PATEL

Hi Expert,\
you have to modify your css to adjust the white-space\

```
li {    padding-left: 50px;    width:100px;    text-align:center;    position:absolute;    white-space:nowrap;}
```

\


---

Original Source: https://www.mindstick.com/forum/1147/irritating-magnify-effect-on-mouse-hover

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.