Hotspot experiment #1

HTML

<div class="hotspot">
    <div class="hotspot-inner">
        <div class="hotspot-icon">x</div>
        <p>
        Here is some text</p>
    </div>
</div>

CSS

html {
    background:url(http://lorempixel.com/640/480/city) center center no-repeat;
    background-size:cover;
    height:100%;
}
.hotspot, 
.hotspot-inner, 
.hotspot-icon {
    -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
.hotspot {
    width:34px;
    height:34px;
    margin-left:-25px;
    margin-top:-25px;
    padding:8px;
    
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    
    border-radius:50px;
    box-shadow:0 0 5px rgba(0, 0, 0, 0);
    
    background:rgba(112, 169, 188, 0.5);
    
    cursor:pointer;
}
.hotspot-inner {
    width:34px;
    height:34px;
    
    position:absolute;
    
    background-color:#bbdde6;
    background-image:-webkit-radial-gradient(center, #70a9bc, #fff);
    background-image:-moz-radial-gradient(center, #70a9bc, #fff);
    background-image:-ms-radial-gradient(center, #70a9bc, #fff);
    background-image:-o-radial-gradient(center, #70a9bc, #fff);
    background-image:radial-gradient(center, #70a9bc, #fff);
    
    color:#fff;
    line-height:34px;
    text-align:center;
    font-family:Arial, sans-serif;
    font-size:20px;
    font-weight:bold;
    
    border-radius:34px;
    box-shadow:0 0 0 rgba(255, 255, 255, 0);
}
.hotspot-icon {
    width:34px;
    height:34px;
}
.hotspot:hover {
    /*background:rgba(173, 210, 220, 0.5);*/
    
    box-shadow:0 0 5px rgba(0, 0, 0, 0.25);
}
.hotspot:hover .hotspot-inner {
    box-shadow:0 0 0 8px rgba(112, 169, 188, 1);
}
.hotspot:hover .hotspot-icon {
    -webkit-transform: rotate(-135deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(-135deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(-135deg);  /* IE 9 */
   ...