Html: Video card img a hover - html

Question

hello I want to have a "how" when I go over the picture but the heart is positioned elsewhere. where is the mistake?
and the point I don't understand is why does my card width seem to be overflowing?
Because of the overflow I showed in the picture. When I add a card to the 2nd card. The cards are coming upside down.
.card-video {
width: 305px;
display: flex;
flex-direction: column;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.clip-icon {
position: relative;
}
.clip-icon:hover {
background-color: red;
}
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>

Answer 1

.card-video is having flow direction column.
If you try to put the more card like this it will always show in upside down like a stack. Wrap the entire thing in div and provide the flow-direction: row and flex-wrap : wrap to get desired result.
<style>
.box{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.card-video {
width: 305px;
display: flex;
flex-direction: column;
margin:0.5rem;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.clip-icon {
position: relative;
}
.clip-icon:hover {
background-color: red;
}
</style>
<div class="box">
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
</box>

Answer 2

The flex-direction needs to be set to row, with flex-wrap:wrap as to format correctly.
The .clip-icon can be set to position:absolute if the parent element has position:relative applied.
You can set the clip-icon to display:none and get it to display on picture hover by adding .card-pic:hover .clip-icon: { display:block; }
I have added a snippet below
.box{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.card-video {
width: 305px;
display: flex;
flex-direction: column;
margin:0.5rem;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic:hover .clip-icon{
display:block;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
position:relative;
}
.clip-icon a {
position: relative
}
.clip-icon {
position: absolute;
bottom:10px;
left:5px;
width:20px;
height:20px;
background-color:white;
display:none;
}
.clip-icon:hover {
background-color: red;
}
<div class="box">
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
</box>