Tag Cloud Breaking on Hover

[makeitrein]

Hey CSS Tricks, I’m working on my company’s website – they’ve asked for a tag cloud to be inserted under some of their blog posts.

Check out my WIP here: http://codepen.io/makeitrein/pen/Ndqjwb

I came up with a cool hover effect for individual tags, but it keeps on causing this weird effect on the entire container. I’d like to keep the same padding between tags on hover, and the tags are dynamic, so I can’t know the size of anything beforehand.

Things I’ve tried to solve this issue (unsuccessfully):

1. Increasing the size of the main container on hover, but this sometimes triggers another realignment of the tags depending on the tags used
2. Setting the position of the hovered tag to absolute, but this just gronked things up even worse
3. Adding a negative margin-right or right value to the adjacent material tag-wrapper, this also caused an overflow

Maybe another HTML approach or structure is needed for this problem – does anyone have any suggestions?

main {
            width: 160px;
        }
        .material-tag-wrapper {
            margin: 1px 3px 1px 0;
            display: inline-block;
        }
        .material-tag-wrapper.closeable:hover .material-tag {
            padding-right: 26px;
        }
        .material-tag-wrapper.closeable:hover .material-tag-remove {
            opacity: 1;
            padding-right: 10px;
        }
        .material-tag {
            background-color: blue;
            color: white;
            font-weight: 400;
            cursor: pointer;
            border-radius: 3px;
            padding: 2px 8px;
            text-transform: uppercase;
            font-size: 10px;
            transition: .1s all;
            display: inline-block;
            position: relative;
            text-align: center;
        }
        .material-tag-remove {
            color: #3C4858;
            cursor: pointer;
            font-size: .8em;
            position: absolute;
            top: 4px;
            right: 0;
            opacity: 0;
            text-align: right;
            text-decoration: none;
            width: 100%;
            z-index: 2;
        }
        .material-tag-remove:before {
            content: "x";
            color: white;
        }

[Shikkediel]

Since you’re working with fixed width…

main:hover {
  width: 186px;
}

[Author]

Posts