Pure CSS Popup Box on Hover

HTML
<a id="button" href="#popup">Click me</a> <div id="popup" style="text-align:center;"> <a id="close" href="#">X</a> <h2>Custom CSS Popup Box</h2> Popup using the <span style="color:#DF7401;">:target</span> and transition with opacity. <br> <br> </div>
CSS
body { background-color:#D77A61; } #button { position:relative; top:100px; left:50vw; margin-left:-30px; width:60px; font-size:16px; padding:20px; background-color:white; border-radius:10px; font-family:arial; text-decoration:none; font-weight:bold; color:black; } #button:hover { background-color:#EFF1F3; color:#D77A61; } #popup { position:relative; top:25vh; left:25vw; width:50vw; background-color:#EFF1F3; color:black; -khtml-opacity:0; -moz-opacity : 0; -ms-filter: "alpha(opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter : alpha(opacity=0); opacity : 0; padding:20px; border-style:solid; border-radius:15px; border-color:#bbd8b3; transition:all 1s; -webkit-transition:all 1s; } #popup:target { -khtml-opacity:1; -moz-opacity : 1; -ms-filter: "alpha(opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter : alpha(opacity=100); opacity : 1; } /* Bouton fermeture */ #close { position:absolute; left:100%; top:-20px; margin-left:-10px; background-color:#EFF1F3; font-size:12px; padding:5px 7px; border-radius:50px; border-style:solid; border-color:#bbd8b3; font-weight:bold; color:#bbd8b3; text-decoration:none; font-family:arial; } #close:hover { background-color:#EFF1F3; border-color:#bbd8b3; color:#D77A61; } #close:active { background-color:#A9F5F2; color:black; }
JAVASCRIPT
Expand for more options Login