JSFiddle - React, Tailwind, and code Playground
HTML
<div id="LanguageBox">
<div>English</div>
<form action="index.php" method="post">
<table>
<tr>
<td><input type="radio" name="Language" value="English" /> <img src="img/english.png" /> </td>
</tr><tr>
<td><input type="radio" name="Language" value="Deutsch" /> <img src="img/deutsch.png" /> </td>
</tr><tr>
<td><input type="radio" name="Language" value="Nederlands" /> <img src="img/nederlands.png" /> </td>
</tr><tr>
<td colspan="2"><input type="submit" value="PHP STUFF"/></td>
</tr>
</table>
</form>
</div>
CSS
/* LANGUAGEBOX */
#LanguageBox {
position: relative;
float: left;
height: 11px;
opacity: .4;
text-align: center;
margin: 20px;
}
#LanguageBox:hover {
opacity: 1;
}
#LanguageBox div {
width: 73px;
border-radius: 2px;
}
#LanguageBox div, #LanguageBox form{
font-size: small;
color: #555555;
border: 1px solid #AAA;
padding: 5px 3px;
box-shadow: 0px 1px 2px #DDD;
border-radius: 2px;
background-color: #f0f0f0;
}
#LanguageBox input {
margin-left: 10px;
}
#LanguageBox form {
position: absolute;
border-radius: 2px;
text-align: center;
margin-left: auto;
margin-right: auto;
background: #f0f0f0;
opacity: 0;
left: -999em;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#LanguageBox:hover form {
left: 0;
opacity: 1;
}
JavaScript
On the site some stuff that's putted in is via PHP.