Blog project help needed

Hi guys,

I started using CSS/HTML today, as I have a project that needs to be presented on this blog: test.gdnm.org/#

I'm having a few issues. Is there any way of getting the pop out boxes to activate on hover instead of linking through HTML? Also if there's a way to have the boxes pop out in different directions rather then straight to the right, that'd be great too.

Initially I wanted the centre to act as a button, upon pressing it creates a 'button' like effect, even if that is just some added shadows to simulate the effect. This would then hopefully reveal the 4 boxes surrounding the centre (so they wouldn't be shown until you press the button).

Thanks for your time and hopefully someone more experienced can help me out!

CSS:

@import url(fonts.googleapis.com/css?family=BenchNine);

/* Set up our background grid */
body
}

{

}

/* Hide some of the blog furniture */.quickpost,.site-header,.sidebar,time {
display: none;
} /* * All of our board items have these styles in common, * so we ensure they all have the same class */
.board-item {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
background: black;
-webkit-transition: .3s ease-in-out all;
}
/* * We expand all of our board items by a fixed amount. */
.board-item:target {
width: 320px;
height: 320px;
background: grey;

}
.logo {
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin:-150px auto auto -150px;
text-align:center
;
}

.logo:active {

visibility:visible;
}


{
}
#test-section {
background: url((i.imgur.com/uDd5Y.png);
background-position: 50% 50%;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: 100px;
}
#test-section-two {
top: 50%;
left: 50%;
margin-top: 70px;
margin-left: 100px;
}
#test-section-three {
top: 50%;
left: 50%;
margin-top: 70px;
margin-left: -180px;
}

#test-section-four {
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -180px;
}

#test-section-two:target {
width: 320px;

}

#test-section-four:hover {
background-color: green;


}

.board-item:target {
background-color: gold;
}


}


/* By using our ID selectors we can select individual elements */}