숨겨진 스피치 거품 다른 상자 아래 CSS 효과

Question

전 첫 번째 포트폴리오 웹 사이트를 구축하는 일러스트 레이터입니다.

이이 demo (처음 두 블록)에서 볼 수있는 이미지

위에 마우스를 올려 때 연설 거품은 이미지가 울부 짖는 소리 아래에 항상 그러나 표시 나는 숨겨진 연설을 갖는 텍스트 거품하고 내 그림에 주석을 그들.

이미지에 다음과 같은 CSS 효과가 적용되어 이미지가 확대됩니다. 어쨌든 연설 거품 클래스에 영향을 줄 수 있는지 확실하지 않습니다.

내가 연설 거품을 만들기 위해 누락 된 코드를 지적하면 누군가가 정말 도움이 될만한 모든 것 위에 나타납니다!

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 클래스 "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 클래스 "규모"에 대한

.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; 
} 

Answer 1

시도 추가 z-index: 5