Hotspots

Usefull elements to build website

01Hotspots activated on hover

#dp-hotspoted-image5b4cdeabe23bc .dp-hotspot-wrapper .HotspotPlugin_Hotspot > div { min-width: 300px;}#dp-hotspoted-image5b4cdeabe23bc .dp-hotspot-wrapper .HotspotPlugin_Hotspot:not(.dpHotspotImageMarker):before { background: #ff3368;}#dp-hotspoted-image5b4cdeabe23bc .dp-hotspot-wrapper .HotspotPlugin_Hotspot:not(.dpHotspotImageMarker):after { background: #ffffff;}

01Hotspots activated on click

#dp-hotspoted-image5b4cdeabe60ec .dp-hotspot-wrapper .HotspotPlugin_Hotspot > div { min-width: 200px;}#dp-hotspoted-image5b4cdeabe60ec .dp-hotspot-wrapper .HotspotPlugin_Hotspot:not(.dpHotspotImageMarker):before { background: #7558d7;}#dp-hotspoted-image5b4cdeabe60ec .dp-hotspot-wrapper .HotspotPlugin_Hotspot:not(.dpHotspotImageMarker):after { background: #eeee22;}

01Custom hotspots, allways active

#dp-hotspoted-image5b4cdeabe95b8 .dp-hotspot-wrapper .HotspotPlugin_Hotspot.dpHotspotImageMarker {width: 45px;height: 60px;margin-left: -22.5px;margin-top: -30px;background-image: url(http://dirigoagency.com/wp-content/uploads/2017/05/marker.png);}#dp-hotspoted-image5b4cdeabe95b8 .dp-hotspot-wrapper .HotspotPlugin_Hotspot > div { min-width: 250px;}#dp-hotspoted-image5b4cdeabe95b8 .dp-hotspot-wrapper .HotspotPlugin_Hotspot:not(.dpHotspotImageMarker):before { background: #ff3368;}#dp-hotspoted-image5b4cdeabe95b8 .dp-hotspot-wrapper .HotspotPlugin_Hotspot:not(.dpHotspotImageMarker):after { background: #ffffff;}