Scale – PP Columns to 90%

I’m currently building a local site for my job that contains the company information and documents.
Due to the fact our company (still) is using 4:3 displays, i had to scale some assets of my page to 90%. Ive done this by editting te css file which is nearly completed but im stuck on the PP-Columns section.

I’m trying to scale my PP-columns to 90% by adjusting the css file.
Everything goes well except the hoover function and header text.
I can’t seem to “stack” them on top of each other, where this is done so in the default setup.

What is happening now is that the headertext is beneath the column-image, also the Hoover effect are not shown but i guess they are linked to the header text.

Is there someone who can tell me what i’m doing wrong or did not see already?

My css file adjustments (PP columns section):

/* PP COLUMNS*/
#front-columns {
	display: block;
	width: auto;
	float: none;
}

.column-image {
	width: 100%;
	display: block;
	overflow: hidden;
	line-height: 0px;
}

.column-image-inside {
	width: 90%;
	height: 90%;
	position: absolute;
	top: 5%;
	left: 5%;
	background: rgba(0,0,0,0);
	z-index: 250;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.column-image-inside-centered {
	position: relative;
	top: 45%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

.column-image-inside:hover{
	background: rgba(0,0,0,.7);
}

.column-header-image {
	display: block;
	width: 90%;
	position:relative;
	top:30px;
	text-transform:uppercase;
	font-size: 20px;
	line-height: 35px;
	font-weight: 200;
	text-align: center;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
}

.column-text-separator {
	display: block;
	float: none;
	clear: both;
	width: 10px;
	height: 1px;
	background: #FFF;
	margin: 20px auto;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.column-text {
	position:relative;
	top:-30px;
	font-size:16px;
	padding: 0px 20px;
	width: 90%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	line-height: 1.5em;
	z-index: 251;
	color: #EEE;
	text-align: justify;
	/*-moz-transform:translate(0,-55%);
	-o-transform:translate(0,-55%);
	-webkit-transform:translate(0,-55%);
	-ms-transform:translate(0,-55%);
	transform:translate(0,-55%);*/
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
}

.column-link {
	position: absolute;
	width: 90%;
	height: 90%;
	display: block;
}

.column-header-image,
.column-text-separator,
.column-text {
	filter: alpha(opacity=0);
	opacity: 0;
}

.column-image-inside:hover .column-header-image,
.column-image-inside:hover .column-text  {
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0px;
}

.column-image-inside:hover .column-text-separator  {
	filter: alpha(opacity=100);
	opacity: 1;
	width: 90%;
}

.column-image img {
	width: 100%;
}

.coldisplay1 .column-image-inside { background-color: rgba(0,0,0,.7);}
.coldisplay1 .column-image-inside:hover { background-color: rgba(0,0,0,.9);}
.coldisplay1 .column-image-inside-centered {
	position: relative;
	top: 0%;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
	padding-top:20px;
}
.coldisplay1 .column-header-image,
.coldisplay1 .column-text-separator,
.coldisplay1 .column-text {
	width: 90%;
	filter: alpha(opacity=90);
	opacity: 0.9;
	top: 0px;
}
.coldisplay1 .column-image-inside .column-text-separator { width:90%;}
.coldisplay1 .column-image-inside:hover .column-text-separator { width:90%;}

.coldisplay2 .column-image-inside { position:relative;}
.coldisplay2 .column-image-inside:hover { background-color: transparent;}
.coldisplay2 .column-image-inside-centered {
	width: 90%;
	position: relative;
	top: 0%;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
	padding-top:20px;
}

.coldisplay2 .column-header-image,
.coldisplay2 .column-text {
	width: 90%;
	filter: alpha(opacity=90);
	opacity: 0.9;
	top: 0px;
	color: inherit;
}

.coldisplay2 .column-text {padding: 10px 10px 20px 10px;}
.coldisplay2 .column-text-separator {display: none;}