Dúvida em desenvolvimento de site

Gente é o seguinte, estou no ensino medio, e preciso MUITO de ajuda, tive uma ideia para a produção do meu site na escola, porém minha ideia não ta dando certo.

É meio complicado mas vamos la! O site vai ser bem diferente dos sites dos outros alunos da sala, meu logo vai ser no meio do site, e essa é minha ideia: Quando passa o mouse na parte direita do logo, uma coluna aparecerá do lado do logo e terá informações sobre o Hinduismo (tema dado pelo professor) e quando se passar o mouse pelo lado esquerdo, terá informações sobre o Deus Brahma. Não sei o que eu faço. *Esse redondo é um circulo opaco atrás do logo

ME AJUDA!

Tenho esse HTML:

<div class="logo"> <img src="florlotus.png" id="center" width="96" height="120" ></div>

<div class="redondo">
<img src="redondo.png" width="120" height="120" />
</div>
<div class="dropdown" style="float:right; margin-right:45%">
 <button class="dropbtn">Hindu</button>
 <div class="dropdown-content" style="left:0;">
 <a href="#">Hinduismo</a>

 </div>
</div>

<div class="dropdown" style="float:left; margin-left:46%">
 <button class="dropbtn">Brahma</button>
 <div class="dropdown-content">
 <a href="#">O brahma</a>

 </div>
</div>

Mais esse CSS:

.dropbtn {
 margin-top: 500;
 color: white;
 padding: 16px;
 font-size: 16px;
 border: none;
 cursor: pointer;
}

.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: absolute;
 right: 0;
 background-color: #FFF;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {

 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
font-family:"Courier New", Courier, monospace;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

 display: block;
}

.dropdown:hover .dropbtn {

 background-color: ;
}

.logo {

width:160px;
height:160px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
;
z-index: 2;

}

.redondo {

width:150px;
height:150px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
;
z-index: 1;

}