Ion Icons gitch when hover flexbox

Hi,

When you scroll down one section on my page, there are 6 buttons. The background is made with flexbox and there is an h3 and an icon on top of it.

When I hover the buttons, in Chrome the icons on the right change in size somewhat and I have no idea how to fix it.

For some reason, changing the colors in the inline css has some effect, but the buttons “vetverlies” and “Toolbox” still have a small glitch. May seem like a minor issue, but it drives me crazy.

My code:

<h1>Werk Vandaag Nog Aan Jezelf</h1>

<div class="flex-grid-front">
<div class="col">
<div class="col-inside">

<i class="ion-ios-body" style="font-size: 40px; color: #4AC2E7;"></i>
<h3>Fysiek</h3>
</div>
</div>
<div class="col">
<div class="col-inside">

<i class="ion-arrow-graph-down-right" style="font-size: 40px; color: #ff5b00;"></i>
<h3>Vetverlies</h3>
</div>
</div>
<div class="col">
<div class="col-inside">

<i class="ion-wrench" style="font-size: 40px; color: #fe007b;"></i>
<h3>Toolbox</h3>
</div>
</div>
<div class="col">
<div class="col-inside">
	
<i class="ion-android-restaurant" style="font-size: 40px; color: #fabd29;"></i>
<h3>Food</h3>
</div>
</div>
<div class="col">
<div class="col-inside" style="word-break: break-all;">

<i class="ion-leaf" style="font-size: 40px; color: #77a047;"></i>
<h3>Supplementen</h3>
</div>
</div>
<div class="col">
<div class="col-inside">

<i class="ion-earth" style="font-size: 40px; color: #d04c46;"></i>
<h3>Lifestyle</h3>
</div>
</div>
</div>

and the css:

/* flexbox frontpage
=============================================================*/
.flex-grid-front {
  	display: flex;
	flex-wrap: wrap;	
	justify-content: center;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 30px;
}

.col {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30%;
	min-width: 100px;
	margin: 5px;
	color: #fff;
	height: 200px;
	opacity: 1;
	border-radius: 2px;
	-webkit-transition: all .2s ease-in-out;
		-moz-transition:    all .2s ease-out-in;
		-ms-transition:     all .2s ease-out-in;
		-o-transition:      all .2s ease-out-in;
		transition:         all .2s ease-out-in;
	background: rgba(89,89,89,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(89,89,89,1) 0%, rgba(68,68,68,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(89,89,89,1)), color-stop(100%, rgba(68,68,68,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(89,89,89,1) 0%, rgba(68,68,68,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(89,89,89,1) 0%, rgba(68,68,68,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(89,89,89,1) 0%, rgba(68,68,68,1) 100%);
background: radial-gradient(ellipse at center, rgba(89,89,89,1) 0%, rgba(68,68,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595959', endColorstr='#444444', GradientType=1 );
}

.col:hover {
	opacity: 0.9;
	cursor: pointer;
	-webkit-transition: all .2s ease-in-out;
		-moz-transition:    all .2s ease-in-out;
		-ms-transition:     all .2s ease-in-out;
		-o-transition:      all .2s ease-in-out;
		transition:         all .2s ease-in-out;
}

.col-inside {
	text-align: center;
}

.col-inside h3 {
	margin-bottom: 0px;	
	margin-top: 0px;	
	text-transform: uppercase;
	font-weight: 700;
}

@media only screen and (max-width: 800px){
.col-inside h3 {
	font-size: 1.8rem;
	}
}

Anybody see something weird or knows if this is a common problem?

• This topic was modified 6 years, 11 months ago by gsef.
• This topic was modified 6 years, 11 months ago by gsef.

The page I need help with: [log in to see the link]