items are not staying inline when hover - html

Question

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 class="content">
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
</div>

Answer 1

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 class="content">
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
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.

Answer 2

* {
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 class="content" >
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
</div>