I am an illustrator building my first portfolio website.
To annotate my illustrations I am having hidden speech bubbles with text appear when you hover over an image this can be seen in this demo (the first two blocks)
However the speech bubbles are always underneath the images bellow them.
The images bellow also have a CSS affect on that enlarges them and I am not to sure if this could be affecting the speech bubble class in any way.
If someone could point out to me the code which I am missing to make the speech bubbles appear on top of everything it would be really helpful!
HTML:
<div id="wrapper2">
<div id="container"><a href="#" class="hoverbubble">Hover over me!<span>Hidden message here. Hidden message here. Hidden message here. Hidden message here. Hidden message here.Hidden message here. Hidden message here.Hidden message here.Hidden message here.</span></a></div>
<div id="container"><a href="#" class="hoverbubble"><img src="http://placekitten.com/180/160" class="hoverbubble"/><span>Hidden message here. Hidden message here. Hidden message here. Hidden message here. Hidden message here.Hidden message here. Hidden message here.Hidden message here.Hidden message here.</span></a></div>
<div id="bottem"><div class="scale scaleMe" id="container"></div><div class="scale scaleMe" id="container"></div>
</div>
</div>
CSS for class "hoverbubble"
a.hoverbubble {
text-decoration: none;
}
a.hoverbubble span {
display: none;
position: absolute;
left: 0%;
top: 40%;
}
a.hoverbubble:hover span {
display: block;
position: absolute;
content: attr(title);
min-width: px;
width: 180px;
height: 100px;
top: 180px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
height: 0;
width: 0;
position: absolute;
bottom: 120px;
left: 90px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: rgba(0,0,0,.8);
border-left-color: transparent;
}
CSS for class "scale"
.scale {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.scaleMe:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-box-shadow: 3px 3px 3px #666666;
-moz-box-shadow: 3px 3px 3px #666666;
-o-box-shadow: 3px 3px 3px #666666;
box-shadow: 3px 3px 3px #666666;
z-index: 1;
}
