CODEWITHSUNDEEP
htmlcss
Bill Hal
Bill Hal

Reputation: 21

CSS Class Selector hover

I've been trying to make a navigation bar with small images which respond(by margin 10px from the top) when you hover over them. I applied the hover effects via a class Selector, however when I hover over one image the rest of them respond as well. So, can I correct this with the class Selector?

Here's the html side.

<a href=""><img class="menu" src="weight.png" /></a>
<a href=""><img class="menu" src="height.png" /></a>

Here's the css:

.menu{
    height:100px;
    width:100px; 
    transition:all 0.3s ease-in; margin-left:15px; 
    margin-top:5px;
}
.menu:hover{
    margin-top:15px;
    transition:all 0.3 ease-in;
}

Thank you for your help.

Upvotes: 1

Views: 82

Answers (1)

James Donnelly
James Donnelly

Reputation: 128836

The default vertical alignment for inline content is "baseline". This means that your images by default stick to the bottom of your a elements. To fix this, you simply need to set the vertical alignment on your img elements to "top":

.menu {
    ...
    vertical-align: top;
}

JSFiddle demo.

Upvotes: 1

Related Questions