Afbeelding over de div laten komen!

Hallo,

ik ben bezig met een website maar bij deze found page wil ik dus de foto die de gebruiker meegeeft, dat als je over de foto heen gaat dat ie groter word. Nou lukt dat wel, maar hij doet dit....http://gyazo.com/bd27e89424a958937658be4a70b309fa eerst ziet het er zo uit:http://gyazo.com/8018d929f4c8a70831a31c906cc6b2ba


dit is de css van de items!:

.item{
	position: relative;
	width: 91%;
	height: 150px;
	background-color: #ecf2f2;
	margin: 20px 20px -10px 20px;
	padding: 10px;
	z-index: 1;
	overflow: auto;
}

.item:hover{
	background-color: #d4d9d9;
	overflow: auto;
}

.item_image{
	position: relative;
	width: 120px;
	height: 120px;
	background-image:url('images/bno.png');
	background-size: 120px 120px;
	margin: 10px;
	float: left;
}

.item_image:hover{
	position: absolute;
	width: 250px;
	height: 250px;
	background-image:url('images/bno.png');
	background-size: 250px 250px;
	opacity: 0.7;
	filter:alpha(opacity=100);
	z-index: 2;
}

.item_info{
	width: 75%;
	height: 125px;
	background-color: white;
	margin: 10px;
	float: right;
	font-size: 15px;
	box-sizing: border-box;
	overflow: auto;
	padding: 10px;
}

Dit is de html van de items!:

<div class="item">
						<a href="http://bno.de">
							<div class="item_image"></div>
						</a>
						<div class="item_info">Dit is nog een test text, Dus ik vul nu gewoon wat in!</div>
					</div>
					<div class="item">
						<a href="http://bno.de">
							<div class="item_image"></div>
						</a>
						<div class="item_info">Dit is nog een test text, Dus ik vul nu gewoon wat in!</div>
					</div>

Toevoeging op 18/02/2014 09:48:26:

Zou er misschien iets zijn dat je kan zeggen dat het een overlay wordt ofz?




Toevoeging op 18/02/2014 09:56:08:

Sorry aar bedankt voor het veranderen!
maar weet jij misschien een oplossing?