*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body { margin: 1em; font-family: Geneva, Verdana, Arial; }

.columnsContainer, .header, .footer, .columnsContent { position: relative; margin:auto; }

.leftColumn, .rightColumn { padding: 1.25em; }

.header, .footer { text-align:center; font-family: Verdana, Geneva, Arial; }

.kursiv { font-style: italic; }

.FSinstagramFoto {
    display: block;
    width: 300px;
    height: 300px;
	background-image:url('FSinstagramSW.jpg');
	background-size: 300px 300px;
}

.FSinstagramFoto:hover {
	background-image:url('FSinstagramFARBE.jpg');
}

.FSyoutubeFoto {
    display: block;
    width: 300px;
    height: 300px;
	background-image:url('FSyoutubeSW.jpg');
	background-size: 300px 300px;
}

.FSyoutubeFoto:hover {
	background-image:url('FSyoutubeFARBE.jpg');
}

.columnsContent {
  position: relative;
  width: 20em;
}

.columnsContentLabel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 300px;
  height: 0;
  transition: .8s ease;
}

.columnsContent:hover .columnsContentLabel {
  height: 25%;
}
  
.LabelText {
  white-space: nowrap; 
  color: white;
  font-size: 24px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*  -ms-transform: translate(-50%, -50%); */
}

@media screen and (min-width: 51.5em ) {
  .leftColumn   { width:50%; }
  .rightColumn  { position: absolute; top: 0; left:25em; width: 50%; }  
  .header, .columnsContainer { width:50em; } 
}

@media (hover:none) {
  .columnsContentLabel { height: 15%; }
}