Recently, I came across a helpful tip on Stack Overflow about creating a box when hovering over text using pure CSS. It was quite interesting to implement.
I decided to experiment with the cursor position and placement as well.
span{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 150px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
top: -10px;
left:60px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
top:40px;
right: 135px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
margin-left:-10px;
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
}
p:hover span{
display:block;
}
<p>Hover here<span>some text here ?</span></p>
If you want to view the implementation, click this [link] (http://jsfiddle.net/beerbuddha/4kjnb4e5/)
Another thing I wanted to achieve was splitting the content into a 25% header with a different background color, and the remaining 75% for text and an image.
However, when I tried implementing it, the hover effect stopped working properly and the display attribute seemed completely broken.
Feeling a bit confused at the moment.