CSS hover effect on single results from mysql fetch - php

Question

I looked up online and didn't find the answer. English is my second language, so I think I'm not looking with the good words. I have a search engine on my website and I want to have a "bump" effect when I hover a result. The problem is, when I hover a result, it affects all of them simultaneously.
HTML-PHP
while ($row = mysql_fetch_assoc($getquery)) {
$id = $row['ID'];
$input1 = $row['name'];
echo '<div class="foo">';
echo '<div class="fooimage">';
echo "<a href='details.php?id=$id'> <img alt='Image goes here' src='portal_user/submit_form/" . $row["Photos"] . "' width=190px height=140px></a>";
echo '</div>';
echo '<div class="footext">';
echo "<div class='input1'>";
echo "<a href='details.php?id=$id'>$input1</a>";
echo "</div>";
echo "</div>";
echo "</div>";
}
CSS
.foo {
position: relative;
height: 205px;
width: 200px;
display: inline-block;
background-color: #ececec;
margin-left: 20px;
margin-bottom: 10px;
margin-top: 0px;
box-shadow: 5px 5px 3px #888888;
transition: .7s
}
.foo:hover {
margin-bottom: 10px;
margin-top: -5px;
}
I want to have the bump effect on the foo div. The results need to stay inline-block to have them in rows and not one on top of the other.

Answer 1

You'll need a little jQuery help here I think. I also changed the CSS a little bit, but adjust as necessary:
$( ".foo" ).hover(
function() {
$(this ).addClass('hover');
}, function() {
$( this ).removeClass('hover');
}
);
.foo {
position: relative;
top: 0;
height: 205px;
width: 200px;
display: inline-block;
background-color: #ececec;
margin-left: 20px;
margin-bottom: 10px;
margin-top: 0px;
box-shadow: 5px 5px 3px #888888;
transition: .7s
}
.foo.hover {
position: relative;
top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="fooimage">
<a href='details.php?id=$id'>
<img alt='Image goes here' src='http://placehold.it/190x140' width=190px height=140px>
</a>
</div>
<div class="footext">
<div class='input1'>
<a href='#'>$input1</a>
</div>
</div>
</div>
<div class="foo">
<div class="fooimage">
<a href='details.php?id=$id'>
<img alt='Image goes here' src='http://placehold.it/190x140' width=190px height=140px>
</a>
</div>
<div class="footext">
<div class='input1'>
<a href='#'>$input1</a>
</div>
</div>
</div>
<div class="foo">
<div class="fooimage">
<a href='details.php?id=$id'>
<img alt='Image goes here' src='http://placehold.it/190x140' width=190px height=140px>
</a>
</div>
<div class="footext">
<div class='input1'>
<a href='#'>$input1</a>
</div>
</div>
</div>