<div class="image-hover-text-container">
<div class="image-hover-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</div>
<div class="image-hover-text">
<div class="image-hover-text-bubble">
<span class="image-hover-text-title">Sample</span>
This is a sample image
</div>
</div>
</div>
body
{
font-family: sans-serif;
}
.image-hover-text-container
{
position: relative;
display: inline-block;
width: auto;
height: auto;
transition: all 0.2s linear;
}
.image-hover-image
{
display: block;
}
/* Make the image round */
.image-hover-image img
{
border-radius: 50%;
height: 200px;
}
.image-hover-text
{
position: absolute;
top: 0;
width: 100%;
height: 100%;
margin: 0 auto;
opacity: 0;
cursor: default;
transition: opacity 0.2s linear;
}
.image-hover-text:hover
{
opacity: 1;
}
.image-hover-text-bubble
{
position: relative;
box-sizing: border-box;
top: 0; left: 0; right: 100%;
height: 200px;
text-align: center;
background: rgba(218, 211, 211, 0.9);
border: 1px solid #848484;
border-radius: 50%;
margin: 0 auto;
padding: 25% 8px 5px 8px;
overflow: hidden;
font-size: 17px;
text-align: center;
word-wrap: break-word;
}
.image-hover-text .image-hover-text-title
{
font-size: 25px;
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.