As I was developing my portfolio, I had an idea to add a unique hover effect. I wanted a bubble with an arrow to appear when someone hovers over my name. While I managed to create the basic functionality, I encountered an issue with the -webkit-transition property not working as intended. The positioning of the bubble also seemed off, prompting me to adjust its hiding time for better accessibility. Considering adding a contact form within the bubble, I needed it to be easily accessible.
Here's a snippet of my HTML:
<div id="side-bar">
<h1 id="ab_me">About Me</h1>
<img src="saksham.png" id="saksham">
<p id="name"><span>S</span>aksham <span>C</span>hauhan</p>
<div id="bubble">
SUP!
<div id="bubble-arrow-border">
</div>
<div id="bubble-arrow">
</div>
</div>
</div>
Additionally, here is some CSS I used:
div#side-bar p {
font-size: 25px;
border-bottom: 2px solid red;
position: absolute;
left: 10px;
color: #F63737;
}
div#side-bar p:hover {
border-bottom: 2px groove #C01F1F;
color: #C01F1F;
text-shadow: 0px 1px 2px #F98378;
-webkit-transition: 1s;
}
/* additional CSS rules go here */