Mise en forme CSS3 pour une DIV qui apparaît au clic/survol.

Hello tout le monde. En vue de la réalisation d'un site web, j'ai besoin d'un petit coup de main sur quelque chose que j'ai du mal à faire.

Je sais que le sujet de la DIV qui apparaît au survol d'un bouton est largement traité, mais je n'arrive vraiment pas à me dépatouiller. Car en effet il est possible de le faire en CSS3, mais avec des éléments simples comme :

<div class="info">Montrer/cacher
<div>Texte et éléments...</div>
</div>

.info
{
/* Effet de lien */
text-decoration: underline;
color: blue;
}
.info:hover
{
/* Effet de lien */
cursor: pointer;
color: red;
text-decoration: none;
}
.info div
{
/* On cache le <div>... */
display: none;
}
.info:hover div
{
/* ...Et on ne l'affiche que si la souris passe au-dessus du premier */
display: block;

color: black;
text-align: center;
background-color: yellow;

/* Positionnement en absolute pour pouvoir afficher le bloc "n'importe où" */
position: absolute;
width: 200px;
height: 50px;
left: 50%;
margin-left: -100px;
}

Cependant, je me retrouve avec des éléments plus compliqués et donc je n'arrive pas à retranscrire ça dans mon code. Est-ce de ma faute ou?

Du coup j'ai créé 5 icônes qui devront afficher du texte déporté hors des boutons au survol ou au clic, au choix. Quéquedoisfaire? Parce que j'avoue avoir beaucoup de mal

Je suis jeune webdesigner, donc ne m'insultez pas quans vous verrez le code plz ^^ J'essaie juste d'y arriver!

<div id="contentcolonnes">

<div id="colonne2" class="colonne" style="text-align: center;"><a href="http://10.1.97.13/wp-content/uploads/2015/11/MEDICAL.png"><img class="size-medium wp-image-143 aligncenter" src="http://10.1.97.13/wp-content/uploads/2015/11/MEDICAL-300x300.png" alt="MEDICAL" width="100" height="100"/></a>
<div id="contentimg1">Etudes Cliniques</div>
</div>

<div id="colonne2" class="colonne" style="text-align: center;"><a href="http://10.1.97.13/wp-content/uploads/2015/11/FLACON.png"><img class="size-medium wp-image-142 aligncenter" src="http://10.1.97.13/wp-content/uploads/2015/11/FLACON-300x300.png" alt="FLACON" width="100" height="100" /></a>
<div id="contentimg1">Etudes Cliniques</div>
</div>

<div id="colonne3" class="colonne" style="text-align: center;"><a href="http://10.1.97.13/wp-content/uploads/2015/11/CALEPIN1.png"><img class="size-medium wp-image-198 aligncenter" src="http://10.1.97.13/wp-content/uploads/2015/11/CALEPIN1-300x300.png" alt="CALEPIN" width="100" height="100" /></a>
<div id="contentimg1">Rédaction Medicale</div>
</div>

<div id="colonne4" class="colonne" style="text-align: center;"><a href="http://10.1.97.13/wp-content/uploads/2015/11/FLACON.png"><img class="size-medium wp-image-142 aligncenter" src="http://10.1.97.13/wp-content/uploads/2015/11/FLACON-300x300.png" alt="FLACON" width="100" height="100" /></a>
<div id="contentimg1">Etudes Cliniques</div>
</div>

<div id="colonne5" class="colonne" style="text-align: center;"><a href="http://10.1.97.13/wp-content/uploads/2015/11/FLACON.png"><img class="size-medium wp-image-142 aligncenter" src="http://10.1.97.13/wp-content/uploads/2015/11/FLACON-300x300.png" alt="FLACON" width="100" height="100" /></a>
<div id="contentimg1">Etudes Cliniques</div>
</div>

</div>

<-- Modification des blocs pictos et 5 colonnes de laccueil --!>

#contentcolonnes{
width:100%;
height:auto;
display:inline-block;
}

.colonne {
width:15%;
height:auto;
background-color:#e6e6e6;
margin: 0 1.5% 0 1.5%;
padding:10px 0 10px 0;
display:inline-block;
}

.colonne:hover{
width:15%;
height:auto;
background-color:#d9d9d9;
margin: 0 1.5% 0 1.5%;
padding:10px 0 10px 0;
display:inline-block;
-webkit-transform: scale(1.1);
-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
}

<-- Fin modification des blocs pictos et 5 colonnes de laccueil --!>

Si au passage on peut m'expliquer comment fonctionne les

 -webkit-transform: scale(1.1);
-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);

, c'est quoi? Du js?

Merci!