Hier zur Info mein HTML-Code für das Bild:<!-- Beginn Hotspot Bild -->
<div class="hotspot-demo-1">
<div class="hotspot-demo-1-left">
<img src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/mbr-900x675.jpg">
<div class="spots">
<div id="spot-01">
<a class="spot" href="http://www.mobirise-tutorials.com/" target="_blank">+</a>
<blockquote>
<span class="mbri-link mbr-iconfont mbr-iconfont-btn"></span> Tutorials
<span class="notch notch-right"></span>
</blockquote>
</div>
<div id="spot-02">
<a class="spot">+</a>
<blockquote>Brille
<span class="notch notch-top"></span>
</blockquote>
</div>
<div id="spot-03">
<a class="spot">+</a>
<blockquote>Handy
<span class="notch notch-left"></span>
</blockquote>
</div>
</div>
</div>
</div>
<!-- Ende Hotspot Bild -->
Hier meine CSS:
blockquote {
position: relative;
display: none;
*border: 1px solid #fafafa;
border-color: transparent;
border-radius: 8px;
padding: 8px;
margin: 20px;
text-align: center;
line-height: 1.5em;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
}
blockquote .notch {
position: absolute;
padding: 0;
width: 0;
height: 0;
}
blockquote .notch-top {
top: -10px;
left: 50%;
margin-left: -10px;
border-top: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(0, 0, 0, 0.7);
border-left: 10px solid transparent;
}
blockquote .notch-right {
top: 50%;
right: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid rgba(0, 0, 0, 0.7);
}
blockquote .notch-bottom {
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid rgba(0, 0, 0, 0.7);
border-right: 10px solid transparent;
border-bottom: 0;
border-left: 10px solid transparent;
}
blockquote .notch-left {
top: 50%;
left: -13px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 10px solid rgba(0, 0, 0, 0.7);
border-bottom: 10px solid transparent;
border-left: 0;
}
img {
display: block;
border-radius: 20px;
width: 100%;
}
.hotspot-demo-1-left {
position: relative;
width: 100%;
}
.spots {
position: absolute;
color: #fff;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.spot {
position: absolute;
text-align: center;
line-height: 24px;
font-size: 16px;
*font-weight: bold;
color: #fff;
width: 32px;
height: 32px;
border: 2px solid red;
border-radius: 16px;
background-color: transparent;
}
.spot:hover {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}#spot-01, #spot-02, #spot-03 {
display: inline-block;
min-width: 100px;
}
#spot-01 {
position: absolute;
top: 10%;
left: 40%;
}
#spot-01:hover > blockquote {
display: block;
top: -26px;
left: -98%;
}
#spot-02 {
position: absolute;
top: 35%;
left: 57%;
}
#spot-02:hover > blockquote {
display: block;
top: 25px;
left: -35%;
}
#spot-03 {
position: absolute;
top: 60%;
left: 28%;
}
#spot-03:hover > blockquote {
display: block;
top: -26px;
left: 25px;
}
