DEV Community

loading...

CSS Responsive Hotspots

Jim Frenette
UI engineer interested in all things dev
Originally published at jimfrenette.com Updated on ・2 min read

This code sample shows how to create hotspots for a responsive image entirely in CSS and HTML. When the image scales according to changes in viewport width, the hotspots and their respective tool tips will move accordingly.

Originally published at jimfrenette.com/css/responsive-hotspots

Photo of my dog with the hotspots and active tooltip
Demo and edit in our sandbox

HTML
<div class="hotspot-demo-1">
    <div class="hotspot-demo-1-left">
        <img src="/images/2015/05/kingston.jpg" />
        <div class="spots">
            <div id="spot-01">
                <a class="spot">+</a>
                <blockquote>These are my dog tags
                    <span class="notch notch-right"></span>
                </blockquote>
            </div>
            <div id="spot-02">
                <a class="spot">+</a>
                <blockquote>I am loyal and love my humans 
                    <span class="notch notch-top"></span>
                </blockquote>
            </div>
            <div id="spot-03">
                <a class="spot">+</a>
                <blockquote>My coat has brindle in it
                    <span class="notch notch-left"></span>
                </blockquote>
            </div>
        </div>
    </div>
</div>
CSS

blockquote {
    position: relative;
    display: none;
    border-radius: 8px;
    padding: 8px;
    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: -10px;
    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;
    width: 100%;
}
.hotspot-demo-1-left {
    position: relative;
    width: 50%;
}
.spots {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.spot {
    position: absolute;
    text-align: center;
    line-height: 32px;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    width: 32px;
    height: 32px;
    border: 1px solid #5FB404;
    border-radius: 16px;
    background-color: #5FB404;
}
.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: 250px;
}   
#spot-01 {
    position: absolute;
    top: 65%;
    left: 78%;
}
#spot-01:hover > blockquote {
    display: block;
    top: -16px;
    left: -91%
}
#spot-02 {
    position: absolute;
    top: 28%;
    left: 57%;
}
#spot-02:hover > blockquote {
    display: block;
    top: 36px;
    left: -43%;
}
#spot-03 {
    position: absolute;
    top: 45%;
    left: 20%;
}
#spot-03:hover > blockquote {
    display: block;
    top: -16px;
    left: 18px;
}

Discussion (0)