moving an anchor tag up when we i hover it .

[dagash]

i am trying to make my navbar links move up ( by using margin-top ) but its not working ,,

<div class="aa">
  <!-- <div class="icon"></div> -->
  <a href="#" class="link"><span class="icon-youtube"></span>category</a> 
</div>

and the css is here :

body {
background : #cd8fa0;
}

.aa{
margin-top: 50px;
background : #f9f9f9;
transition : all 0.4s linear;
width :80px;
height : 80px;
}

.icon{
background-image : url('images/alert.png');
width: 48px;
height: 48px;
}

a{
text-decoration : none;
font-size : 14px;
transition : all 0.4s linear;
}

.aa a:hover {
margin-top : 30px;
transform : scale(1.05);

}
span {

dispaly : block;
font-size : 14px;

}


.link:hover span {

color : red;

}

i am trying to make same as it is in this website ( social links icons ):
http://blog.omariemran.com/

note : for this class ( icon-youtube ) , i am using Awesome-font icon library .

[Paulie_D]

Perhaps you could make a Codepen as I don’t think we have enough information.

[Paulie_D]

Pretty sure that’s not what he’s looking for.

As I understand it, his links/list items aren’t moving on hover as he expects.

[Nishant]

If i am getting right what you want to do then change.aa a:hover to .aa:hoverin your css.

take a look here….. http://codepen.io/maxwbailey/pen/rbKzy

[Paulie_D]

We don’t KNOW what the actual issue is until we see a live example (either a link or a Codepen).

Otherwise we’re offering solutions in the dark.

[Nishant]

I think he just want a ‘move up’ hover effect to nav.

[Paulie_D]

That’s obvious but without knowing the full structure we don’t know the best solution. It might be one of the above answers but it might be something else.

[dagash]

soey for being late … it was a hard day ,,,
thank you for your respondse guys ,,, i will try thoose solution and ill come back ..

[dagash]

Nishant
that is what i need , thank you guys…

[noahgelman]

Remove your current styles that are trying to move the link and add:

a {
  position:relative; /* This will let us change where the link is displayed visually without affecting the rest of the dom */
}

a:hover {
  top:-2px; /* This value is the px length and direction you wish to move the link */
}

[dagash]

http://codepen.io/anon/pen/pGrLI

please guys check this ,, also not working …

[Paulie_D]

Trick is to put as much styling on the anchor rather than the li if you want.

You can move some on to the li if you want but you would have to add a hover state to the li too.

http://codepen.io/Paulie-D/pen/DAyFK

[Author]

Posts