html - create four box with hoverover feature -

i create 4 boxes (2 on top , 2 below it), have in centere of page when person hoverover box should move bit , change box colour. each boxes should contain text inside option1, option2, option3 , option4: 4 boxes:

    <div class="selectbox" >     <div class="firsttwooptions">         <div class="foo" id="option1" style="background-color:green;"></div>         <div class="foo" id="option2" style="background-color: black;"></div>     </div>      <div class="lasttwooptions" style="display:block; clear:both;">         <div class="foo" id="option3"  style="background-color:yellow; "></div>         <div class="foo" id="option4" style="background-color:blue;"></div>     </div> </div> 

my css:

.foo {    float: left; width: 200px; height: 200px; margin: 5px 5px 5px 5px; border-width: 1px; border-style: solid; border-color: rgba(0,0,0,.2);} 

now how bring boxes middle of screen, make them toggle , have text inside: once way add text inside by:

$("#option1").text("select option one"); 

in here normal text want text in centre of box, large text , bold.

check out:

html

<div class="selectbox"> <div class="firsttwooptions">     <div class="foo" id="option1" style="background-color:green;"><p>select option one</p></div>     <div class="foo" id="option2" style="background-color: black;"><p>select option one</p></div> </div> <div class="lasttwooptions" style="display:block; clear:both;">     <div class="foo" id="option3" style="background-color:yellow; "><p>select option one</p></div>     <div class="foo" id="option4" style="background-color:blue;"><p>select option one</p></div> </div> </div> 

css

.foo { float: left; width: 200px; height: 200px; margin: 5px 5px 5px 5px; border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, .2); text-align:center; } .selectbox { margin:0 auto; width:425px; } .foo p { display:none; } 

javascript

$(document).ready(function() { $(".foo").hover(function() {     $(this).find('p').css('display','inline');     bg = $(this).css('background-color');     $(this).css('background-color','#fff'); },function() {     $(this).find('p').css('display','none');     $(this).css('background-color',bg); }); }); 

and here fiddle