Simplest solution to overlay div box on mouse-over? - html

Question

working on this all night still no fix...
I have a link and when user hover mouse over it, it should display a box (div) under the link. The box should overlay whatever is under it. How can I do it using the most easyest way in pure-CSS way.
Thx Yummi
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... emojis ...............*/
.emojis {
position: absolute;
padding: 25px 15px 10px 20px;
border-radius: 20px 0px 20px 20px;
background-color:rgba(0, 0, 0, .3);
}
.emojis2>img{
position:absolute;
left:100%;
top:0;
}
.smiley {
position: absolute;
top: 25px;
left: 430px;
}
/*... input message ...*/
input[type=text] {
width: 300px;
height: 50px;
border: none;
outline: none;
padding-left: 37px;
font-family: Arial;
color: white;
font-size: 16px;
font-weight: bold;
letter-spacing: 1.5px;
background-color:rgba(0, 0, 0, .3);
}
<!-- emojis button -->
<div class="smiley" style="height:42px;display:flex;"><img src="http://wizzfree.com/pix/smiley2.png" width="40">
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
</div>
<!-- emojis list -->
<div class="emojis" style="letter-spacing:3px;font-size:20px;">
<div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);"></div>
<br>😃😁😅🤣😉😊😇😲😳😥<p>
<br>🥰😍😘😜🤫🤤😈😻🙈🙊<p>
<br>💘💕💞💌💑 💐🌹🎀🍨🍭<p>
<br>💃🏄🛀🏩👑🦁🦄 🎠🧸💍
</div>

Answer 1

With pure CSS, ugly hack is to hide the div first, show it later if mouse-over. Since the only link in your code is href="emojis.html", below example show moverover div with 'emojis.html' text:
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... emojis ...............*/
.emojis {
position: absolute;
padding: 25px 15px 10px 20px;
border-radius: 20px 0px 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.emojis2>img {
position: absolute;
left: 100%;
top: 0;
}
.smiley {
position: absolute;
top: 25px;
left: 430px;
}
/*... input message ...*/
input[type=text] {
width: 300px;
height: 50px;
border: none;
outline: none;
padding-left: 37px;
font-family: Arial;
color: white;
font-size: 16px;
font-weight: bold;
letter-spacing: 1.5px;
background-color: rgba(0, 0, 0, .3);
}
a.special {
position: relative;
}
a.special div.hidediv {
background-color: white;
display: none;
position: absolute;
z-index: 100;
width: auto;
padding: 10 10 10 10;
}
a.special:hover div.hidediv {
display: block;
}
<!-- emojis button -->
<div class="smiley" style="height:42px;display:flex;"><a href="emojis.html" class="special"><img
src="http://wizzfree.com/pix/smiley2.png" width="40">
<div class="hidediv">emojis.html</div>
</a>
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
</div>
<!-- emojis list -->
<div class="emojis" style="letter-spacing:3px;font-size:20px;">
<div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);"></div>
<br>😃😁😅🤣😉😊😇😲😳😥<p>
<br>🥰😍😘😜🤫🤤😈😻🙈🙊
<p>
<br>💘💕💞💌💑 💐🌹🎀🍨🍭
<p>
<br>💃🏄🛀🏩👑🦁🦄 🎠🧸💍
</div>