0

I would like to make some links (the list under user_options class) scale when the mouse hovers them. I'm new to CSS and HTML so, I guess this is a pretty basic mistake but I still can't make it work. Thanks in advance.

This is my HTML:

<body>
    <div id="content">
        <div id="header" class="animated bounceInLeft" >
            <div class="user row">
                <div class="col-md-3 user_menu">
                    <div class="user_photo">
                        <img src="AVATAR.jpg" alt="User Profile Photo" class="user_pic"> 
                    </div>
                    <div class="user_options">
                        <ul>
                            <li><a href="#">Rui Nunes  </a></li>
                            <li><a href="#">Edit Profile </a></li>
                            <li><a href="#">Logout </a> </li>
                        </ul>
                    </div>
                </div>

          (etc...............)

            </div>                
        </div>

And this is my CSS code:

#header .user .user_menu .user_options ul li a {
transition: all .2s ease-in-out;
}
#header .user .user_menu .user_options ul li a:hover {
transform: scaleX(1.3);
}
Usman
  • 463
  • 2
  • 9
Rui Nunes
  • 1
  • 1
  • 1
    Transforms [do not work](https://stackoverflow.com/questions/29667859/transform-css-property-doesnt-work-with-a-element) on inline elements. Add `display: inline-block` to this (_#header .user .user_menu .user_options ul li a_) css rule. – Lewis Mar 13 '19 at 16:48
  • 1
    If you're changing the size/position of something you're hovering, it's often better to use a fake element over the top that doesn't interfere with the event so you don't get into a hovered/unhovered loop and cause flickering between your two states. – DBS Mar 13 '19 at 17:02
  • Thank you so much, it worked perfectly! – Rui Nunes Mar 13 '19 at 17:16

2 Answers2

4

Transform does not work on inline elements. So, you can achieve a similar effect by using font size property as below

a:hover {
  font-size: 1.3rem;
}
Usman
  • 463
  • 2
  • 9
0

The comment of Usman is correct. Here is the bundled solution:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #header .user .user_menu .user_options ul li a {
            transition: all .2s ease-in-out;
            }
            #header .user .user_menu .user_options ul li a:hover {
            font-size: 1.3rem;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div id="header" class="animated bounceInLeft" >
                <div class="user row">
                    <div class="col-md-3 user_menu">
                        <div class="user_photo">
                            <img src="AVATAR.jpg" alt="User Profile Photo" class="user_pic"> 
                        </div>
                        <div class="user_options">
                            <ul>
                                <li><a href="#">Rui Nunes  </a></li>
                                <li><a href="#">Edit Profile </a></li>
                                <li><a href="#">Logout </a> </li>
                            </ul>
                        </div>
                    </div>

              (etc...............)

                </div>                
            </div>  
        </div>
    </body>
</html>

But please be aware that this solution needs some more fixings. E.g. you give your elements a predefined height so that the content itself is not moving when hovering over the links.

Something like this (very basic solution):

#header .user .user_menu .user_options ul li {
    height: 1.5rem;
    }
Pascal Gerber
  • 85
  • 7