<style>

#mari {
position:fixed;
margin:auto;
display:inline;
top:130px;
left:150px;
cursor:crosshair;
background-color:#CCC;
}


.circle1 a {
background-color:#4D3D54;
margin:3px;
width:100px;
height:20px;
overflow: hidden;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
display: inline-block;
}

.circle2 a {
background-color:#4D3D54;
margin:auto;
width:100px;
height:20px;
overflow: hidden;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
display: inline-block;
}

.circle3 a{
background-color:#4D3D54;
margin:auto;
width:100px;
height:20px;
overflow: hidden;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
display: inline-block;
}

 .circle4 a{
background-color:#4D3D54;
margin:auto;
width:100px;
height:20px;
overflow: hidden;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
display: inline-block;
}

#text1, #text2, #text3, #text4 {
position:fixed;
top:260px;
background-color:#FFF;
left:224px;
opacity:0.0;
height:310px;
padding:10px;
overflow:hidden;
font-family: arial;
font-size:8px;
text-transform:uppercase;
letter-spacing:1px;
color:#655C6A;
width: 180px;
z-index:99;
text-align: justify;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
}

.circle1 a:hover{
z-index:99;
background-color: #DC3F69;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
}

.circle2 a:hover{
background-color: #DC3F69;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
}

.circle3 a:hover{
background-color: #DC3F69;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
}

.circle4 a:hover{
background-color: #DC3F69;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
cursor:crosshair;
}

#text1:target {
margin-top: 80px;
opacity:0.9;
height: 310px;
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;
cursor:crosshair;
}

 #text2:target {
margin-top: 80px;
opacity:0.9;
height: 310px;
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;
cursor:cro
sshair;
}

#text3:target {
margin-top: 80px;
opacity:0.9;
height: 310px;
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;
cursor:crosshair;
}

#text4:target {
margin-top: 80px;
opacity:0.9;
height: 310px;
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;
cursor:crosshair;
}

</style>

<div id='mari'>
<div class='circle1'>
<a href="#text1"></a>
<div id='text1'> BOX 1</div></div>


<div class='circle2'>
<a href="#text2"></a>
<div id='text2'>BOX 2</div></div>

<div class='circle3'>
<a href="#text3"></a>
<div id='text3'>BOX 3</div>
</div>


<div class='circle4'>
<a href="#text4"></a>
<div id='text4'>BOX 4</div></div>


</div>