items are not staying inline when hover-CodePudding

I have a list of images that are inline. When I hover an image it will show a background with some width and height appear.

My problem is that, when I hover first item for example, the last one or last 2 are going under the first one and I don't want that, I want to stay inline, and if there are no spaces for them in the .content, they must disapppear in order to let the .item:hover create his spaces for showing the background with his width/height.

Also, when I hover last 2 images, its glitching..

This is my code (check on fullscreen)

* {
   color: yellow;
}

img {
    width: 270px;
    height: 300px;
}

.content {
    width: 100%;
    margin-left: 20px;
    margin-top: 20px;
    display: inline-flex;
    flex-wrap: wrap;
}

.item {
    display: inline-block;
    background-color: transparent;
    width: 250px;
    height: 350px;
    margin-right: 20px;
    transition: 1s ease-in-out;
    margin: 10px;
}

.item:hover {
    background-color: blue;
    width: 1000px;
    height: 350px;
}

.item:hover .item-description {
   width: 300px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
    position: relative;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}

.item:not(:hover) .item-description {
    visibility: hidden;
    height: 0;
    width: 0;
    opacity: 0;
    transition: unset;
}

<div >
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
</div>

CodePudding user response：

I added flex-wrap: nowrap; on your .content and none of the cards are going to the next line when hovering. Please view the snippet.

* {
   color: yellow;
}

img {
    width: 270px;
    height: 300px;
}

.content {
    width: 100%;
    margin-left: 20px;
    margin-top: 20px;
    display: inline-flex;
    flex-wrap: nowrap;
}

.item {
    display: inline-block;
    background-color: transparent;
    width: 250px;
    height: 350px;
    margin-right: 20px;
    transition: 1s ease-in-out;
    margin: 10px;
}

.item:hover {
    background-color: blue;
    width: 1000px;
    height: 350px;
    flex-shrink: 0;
    overflow: scroll;
}

.item;hover .item-description {
   width: 300px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
    position: relative;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}

.item:not(:hover) .item-description {
    visibility: hidden;
    height: 0;
    width: 0;
    opacity: 0;
    transition: unset;
}

<div >
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
    <div >
        <div >
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
        </div>
        <div >
            test
        </div>
    </div>
</div>

EDIT: Added flex-shrink: 0; to item:hover to preserve the 1000px width Also, I added overflow: scroll; on the same class so you can scroll horizontally to see the content that overflows.

CodePudding user response：

* {
   color: yellow;
}

img {
    width: 270px;
    height: 300px;
}

 .content {
     width: 100%;
     margin-left: 20px;
     margin-top: 20px;
     display:flex;
     flex-wrap:nowrap;
     overflow:auto
 }

.item {
    display: inline-block;
    background-color: transparent;
    width: 250px;
    height: 350px;
    margin-right: 20px;
    transition: 1s ease-in-out;
    margin: 10px;
}

.item:hover {
    background-color: blue;
    width: 1000px;
    height: 350px;
}

.item:hover .item-description {
   width: 1000px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
    position: relative;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}

.item:not(:hover) .item-description {
    visibility: hidden;
    height: 0;
    width: 0;
    opacity: 0;
    transition: unset;
}

<div  >
            <div >
                <div >
                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
                </div>
                <div >
                    test
                </div>
            </div>
            <div >
                <div >
                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
                </div>
                <div >
                    test
                </div>
            </div>
            <div >
                <div >
                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
                </div>
                <div >
                    test
                </div>
            </div>
            <div >
                <div >
                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
                </div>
                <div >
                    test
                </div>
            </div>
            <div >
                <div >
                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
                </div>
                <div >
                    test
                </div>
            </div>
            <div >
                <div >
                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
                </div>
                <div >
                    test
                </div>
            </div>
        </div>