CSS hover transition not working properly

I have an idea. Since you want to make the elements stand still when something else is hovered, you will need them to positioned in an 'absolute' manor, but that does not work with inline-block. What I suggest is instead of giving each element the same characteristics using one div (i.e cats3) make the circles separated using <span> tags and adjust the padding and margin accordingly. Instead, cats3 will be the 'wrapper' which will have a position of relative and the 3 spans will be individual circles. I know this defeats the purpose of DRY, but the only way to get rid of that effect is to absolutely position position. I noticed this when experimenting with your code. Also, I suggested the media effect because you and I may have different screen resolution, but I soon found that you were talking about the bounce effect and not what I had assumed.

Britni Alexander I think I know what you are trying to do, change the following in your css to mine below.

Give your cat3 a height of 300px

.cats3 {
    height: 300px;
    margin-bottom:50px;
}

Remove the inline-block and replace it with a float. The float will align each div next to each other like the inline-block did.

.cats3 div {
    float: left;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    margin-right:25px;
    background: #440000;
    margin-top:0;
    margin-bottom:0;
    padding:0;
}

example

Are you fixing the margins to fit your screen or the screens of other individuals? or are you fixing the margins just to adjust the layout?

If you were trying to fix the margins to adjust the layout to your liking one option would be to make the margins of the div 'auto'. Heres a quick fix to your problem. First head over to your .cats3 div which looks like this:

.cats3 div {
        display: inline-block;
        height: 300px;
        width: 300px;
        border-radius: 50%;
        margin-right:25px;
        background: #440000;
        margin-top:0;
        margin-bottom:0;
        padding:0;
}

Now what you do is remove all your margins and instead put one margin to points to all sides to move towards the center using the property auto. And then it should look like this:

.cats3 div {
        display: inline-block;
        height: 300px;
        width: 300px;
        border-radius: 50%;
        margin: auto;
        background: #440000;

        padding:0;
}

Finally, remove the margins set on .cats3 and .cats3 div:last-child, completely remove their margins, they are not necessary in this case and those three classes should look like this next too each other: (Note I removed .cats3 div:last-child completely because it only had a margin there with no other styles in it.

.cats3 {
        height: 100%;
        display:block;
       /*margin bottom removed*/
}
.cats3 div {
        display: inline-block;
        height: 300px;
        width: 300px;
        border-radius: 50%;
        margin: auto;
        background: #440000;

        padding:0;
}
.cats3 div:last-child {
       /*Just remove this one*/
}

And the final result should look like this: http://jsbin.com/AdeCIkOY/1

Note: I grabbed the image URL's from your github. So change those when you take the code from my bin. When you hover over this jsbin site you will see a small "edit" tab at the top right corner of your screen, click that and you can see the changes that I mave. Have a wonderful day.

That's great. THank you for your feedback. But they are still bouncing up and down. Do you see that? Or is it just me. I looked in Chrome and Safari and they are bouncing on each. I had the last-child there because I don't want the last one to have margins on the right so that it will line up with the edge of the div.content which is 960px.

If you are particularly focused on user 'view-ability' in terms of different screen resolutions. I suggest you put a media property in your stylesheet:

@media screen and (max-width: /*place screen value here (i.e. 780px)*/){
  /*Change classes, ID, and elements here*/
}
``

Oh! the bouncing up effect. Here, let me see what I can do about that. I'm sorry, I thought you meant that one element was under the other when hovered. Let me take another look.

Yeah, I know and I will do that once I get this view working properly. Also, that's not really relevant to my question.

Haha, cool thanks. Yeah, nothing goes under anything else yet because i have it set to a fixed width.

Thanks for the idea! I'll give it a whirl tomorrow and let you know how it goes :)

You are a magician! Thanks. Looks like my container was just deciding to grow all willy nilly since i didn't tell it to stay little.