Edit in JSFiddle

		<div class="bg-kreis bg-bild-1" onclick="location.href='http://unofficialwsx5.de';return false;">
			<div class="tr-kreis">freundlich</div>
		</div>

		<div class="bg-kreis bg-bild-2" onclick="location.href='http://unofficialwsx5.de';return false;">
			<div class="tr-kreis">hilfreich</div>
		</div>

		<div class="bg-kreis bg-bild-3" onclick="location.href='http://unofficialwsx5.de';return false;">
			<div class="tr-kreis">nett</div>
		</div>

		<div class="bg-kreis bg-bild-4"  onclick="location.href='http://unofficialwsx5.de';return false;">
			<div class="tr-kreis">perfekt</div>
		</div>

.bg-kreis {
	position: relative;
	float: left;
	margin:  200px 25px 0 25px;
	width: 150px; height:150px;
	background:black;	
	
	-moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	-o-border-radius: 75px;
	border-radius: 75px;
}
.tr-kreis {
	position: absolute;
	left: 0; top:0;
	height: 100%; width:100%;
	background: red;
	
	color: red;
	font-weight:bold;
	letter-spacing: 3px;
	line-height: 145px;
	text-align: center;
	
	-moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	-o-border-radius: 75px;
	border-radius: 75px;
	
	-webkit-transition: all .55s ease-in-out 0s;
	-moz-transition: all .55s ease-in-out 0s;
	-o-transition: all .55s ease-in-out 0s;
	transition: all .55s ease-in-out 0s;
}
.bg-kreis:hover .tr-kreis {
	-webkit-transform:translate(0, -151px);
	background:white;
	color: black;		
}

/* alle hintergrundbilder sind gleich!!!
   bilder müssen ausgetauscht werden.
*/
.bg-bild-1{
	background: white url('http://unofficialwsx5.de/index.php?page=Attachment&attachmentID=1922') no-repeat center center;
}
.bg-bild-2{
	background: white url('http://unofficialwsx5.de/index.php?page=Attachment&attachmentID=1922') no-repeat center center;
}
.bg-bild-3{
	background: white url('http://unofficialwsx5.de/index.php?page=Attachment&attachmentID=1922') no-repeat center center;
}
.bg-bild-4{
	background: white url('http://unofficialwsx5.de/index.php?page=Attachment&attachmentID=1922') no-repeat center center;
}