how to change anchor tags position, when I hover over it?

Question

How to change position of anchor tags on hover?

I have tried many things like setting position to relative and then using top,bottom,left and right, setting the background-position giving margins but nothing works.

Other attributes are working like changing background-color on hover etc.

[here, in the anchor tag with ID facebook, when I am adding hovering effect like changing its position on hover, changes are not reflected in the page][1]

https://i.stack.imgur.com/Gpwlb.png

This is the hover rule for the facebook anchor tag https://i.stack.imgur.com/LSYcX.png

This is the project page, where I want to shift the facebook anchor little downwards,upwards,leftwards or rightwards

how to do this, is there any solution for this?

Answer 1

In your hover call on your element, put the transform property attached to the hover element. In the base style for the element add a nice smooth transition so it slowly moves to it's new position

Somewhat like this:

.my-element {
    /*Don't forget the rest of the styling for this element*/
    transition: 0.5s;
}

.my-element:hover {
    /*You can alter this to change the position of your element however you want, translate function takes an X and a Y*/
    transform: translate(10px, 0);
}

So when you hover on your element, it should slowly move up 10 pixels in 1/2 of a second. (You can change that too if you want). In the hover element you can also change the color and background, basically anything will slowly change over the given transition time. Also, if you want to change the element on one axis, you can use translateX or translateY instead of just translate