How to fix buggy CSS hover - html

Question

I am coding a page to select different products. each 'bild box' in my HTML is supposed to display a product and when you hover with you mouse over it, it zooms into the picture and a few other styling effects happen. When hovering over the boxes you can see, that randomly the boxes zoom and it looks glitchy. Here is a demonstration of the effect: https://streamable.com/wei69
I have tried to specify the different hover boxes which makes the code unnecessarily long and didn't fix the problem. Before I did this there were no classes like 'title1, title2' it was only 'title'.
I also tried different browsers and in Safari the effect isn't that bad but it is still not user friendly.
Here is my code:
#flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.bildbox1,
.bildbox2,
.bildbox3,
.bildbox4,
.bildbox5,
.bildbox6 {
width: 100vw;
margin-left: calc(50% - 50vw);
height: 300px;
overflow: hidden;
text-align: center;
}
.bild1,
.bild2,
.bild3,
.bild4,
.bild5 {
width: 100%;
height: 100%;
background-color: black;
/* fallback color */
background-position: center;
background-size: cover;
-webkit-transition: all .3s ease;
}
.bild1 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild2 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild3 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild4 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild5 {
background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.textbox {
background-color: #F2F2F2;
height: 100%;
padding-top: 20%;
text-align: center;
}
.textbox p {
color: darkgrey;
}
.point1,
.point2,
.point3,
.point4,
.point5 {
width: 75px;
margin: auto;
position: absolute;
top: 10px;
left: 0;
bottom: 0;
right: 0;
height: 1px;
background: white;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
display: none;
}
.konfigurieren-button1,
.konfigurieren-button2,
.konfigurieren-button3,
.konfigurieren-button4,
.konfigurieren-button5 {
background: #E30D27;
color: white;
padding: 0 10px;
text-align: center;
height: 30px;
line-height: 1.2;
vertical-align: top;
font-weight: bold;
font-size: 10px;
#include inline-flexbox();
#include align-items(center);
#include justify-content(center);
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
border-radius: 100px;
position: relative;
top: 50px;
z-index: 99;
}
.title1,
.title2,
.title3,
.title4,
.title5 {
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: relative;
top: 100px;
left: 0;
bottom: 0;
right: 0;
height: 50px;
display: block;
color: white;
padding: 25%;
}
.konfigurieren-button1:hover,
.konfigurieren-button2:hover,
.konfigurieren-button3:hover,
.konfigurieren-button4:hover,
.konfigurieren-button5:hover,
{
color: black;
background-color: white;
}
#media (hover: hover) {
.bildbox1:hover .bild1,
.bildbox1:focus .bild1 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox2:hover .bild2,
.bildbox2:focus .bild2 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox3:hover .bild3,
.bildbox3:focus .bild3 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox4:hover .bild4,
.bildbox4:focus .bild4 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox5:hover .bild5,
.bildbox5:focus .bild5 {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.bildbox1:hover .title1,
.bildbox2:hover .title2,
.bildbox3:hover .title3,
.bildbox4:hover .title4,
.bildbox5:hover .title5 {
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
opacity: 1.0;
color: white;
padding: 25%;
}
.point1,
.point2,
.point3,
.point4,
.point5 {
width: 0px;
display: initial;
top: 17%;
}
.title1,
.title2,
.title3,
.title4,
.title5 {
opacity: 0.0;
position: absolute;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
top: 0;
}
.konfigurieren-button1,
.konfigurieren-button2,
.konfigurieren-button3,
.konfigurieren-button4,
.konfigurieren-button5 {
opacity: 0.0;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
margin-top: 135px;
}
.bildbox1:hover .konfigurieren-button1,
.bildbox2:hover .konfigurieren-button2,
.bildbox3:hover .konfigurieren-button3,
.bildbox4:hover .konfigurieren-button4,
.bildbox5:hover .konfigurieren-button5 {
opacity: 1.0;
}
.bildbox1:hover .point1,
.bildbox2:hover .point2,
.bildbox3:hover .point3,
.bildbox4:hover .point4,
.bildbox5:hover .point5 {
width: 75px;
}
}
#media (min-width: 900px) {
.bildbox1,
.bildbox2,
.bildbox3,
.bildbox4,
.bildbox5,
.bildbox6 {
width: 400px;
}
}
<div id="flex-container">
<div class="bildbox1">
<div class="bild1">
<span class="title1"> Text 1</span>
<a href="">
<button class="konfigurieren-button1"> Button 1</button>
</a>
<div class="point1"></div>
</div>
</div>
<div class="bildbox2">
<div class="bild2">
<span class="title2"> Text 2</span>
<button class="konfigurieren-button2">Button 2</button>
<div class="point2"></div>
</div>
</div>
<div class="bildbox3">
<div class="bild3">
<span class="title3">Text 3</span>
<button class="konfigurieren-button3">Button 3</button>
<div class="point3"></div>
</div>
</div>
<div class="bildbox4">
<div class="bild4">
<span class="title4"> Text 4</span>
<button class="konfigurieren-button4">Button 4</button>
<div class="point4"></div>
</div>
</div>
<div class="bildbox5">
<div class="bild5">
<span class="title5"> Text 5</span>
<button class="konfigurieren-button5">Button 5</button>
<div class="point5"></div>
</div>
</div>
<div class="bildbox6">
<div class="textbox">
<h3> header </h3>
<p> paragraph
</p>
</div>
</div>
</div>

Answer 1

Add position: relative; to you .bildbox classes.
.bildbox1,
.bildbox2,
.bildbox3,
.bildbox4,
.bildbox5,
.bildbox6 {
width: 100vw;
margin-left: calc(50% - 50vw);
height: 300px;
overflow: hidden;
text-align: center;
position: relative; /* <-- Add this here */
}
You have position: absolute; elements (your .point classes) that are all over the place. They need to be contained in the "boxes". When you are hovering, those position absolute elements are outside the box and overlapping other boxes.
Remember when using position absolute, that element with position itself of the first parent with a position other than static, else it will be the document window.
On a side note, is there a reason you are using classes like ids? Why do you have .bildbox1, .bildbox2, etc when you should just have 1 .bildbox class.