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;
}
1 Response