How to get rid of the "blue dot" selection icons and make hovering over the whole picture allowed to move it

I have an openlayers map and a pin on the map. I would like to get rid of this blue dot, which shows up when you hover over the pin. There are many similar topics, but found guidelines did not bring me results. I would also like to be able to move the image by mouse clicking on it anywhere

I try do that:

var selectedStyleFunction = function(feature, resolution) {
    return [new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: "white",
            lineCap: "butt",
            lineJoin: "bevel",
            width:3
        }),
        fill : new ol.style.Fill({
            color: "black"
        }),
    })];
};

//drag and drop
const dragInteraction = new ol.interaction.Modify({
        features: new ol.Collection([marker]),
        style: selectedStyleFunction,
});

This makes the dot is not visible at all, but then it is difficult to find it in the image.

My example is here: https://jsfiddle.net/anetka31/eo4prjgx/51/

Solution

Giving the interaction the same style as the marker will remove the blue dot. The pin icon should be anchored near the bottom left and the modify interactions only works on that position (unless pixelTolerance is set high, when it will also work outside the icon which would be confusing). Unlike modify a select interaction will work on any visible part of the icon. By adding a hover (pointermove) select interaction and a custom condition on the drag to check if any features have been picked by a hover the high pixelTolerance can be limited to just the icon. If you want the hover can also change the mouse pointer style to let you know it's over the icon (removing the need for the blue dot). Revised fiddle https://jsfiddle.net/vynk7Ld8/4/ (also updated from a very old version of OpenLayers 3 to OpenLayers 4)