CODEWITHSUNDEEP
css
Matt
Matt

Reputation: 565

How to change the align of a list of icons when hover

I've some problem align a list of icons.

As u can see from the pic below, there is a list of icons. When hover, the current icons enlarges itself.

What I'm trying to do is, change the direction of current icon enlarging. I wish the list align as the way displayed on the right in the pic.

Here's the code:

HTML code:
<div class="bar">
  <li>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
  </li>
</div>


CSS code:
.bar {
    position: absolute;
    left: 5px;
    width: 35px;
    height: auto
    }

.bar li a img {
    position: relative;
    height: 30px;
    width: 30px;
    padding-top: 4px;
    padding-bottom: 4px
    }

.bar li a:hover img {
    position: relative;
    height: 50px;
    width: 50px
    }

enter image description here

Upvotes: 0

Views: 161

Answers (3)

NGLN
NGLN

Reputation: 43669

Add:

.bar li a img { 
    right: -20px;
}  
.bar li a:hover img { 
    right: 0;
}

Upvotes: 0

Uttara
Uttara

Reputation: 2532

here is what you want demo

You need to use float:right for img

.bar li a img {
    float: right;
}

and increase the width of div

.bar {
    width: 50px;
}

Upvotes: 1

Alfo
Alfo

Reputation: 4819

bar li a img {
    float: right;
}

Should do the trick. Can you create a jsFiddle of your problem?

Upvotes: 1

Related Questions