Openlayer3 icon mouse hover animation

Question

I am using openlayer3. And using icon as a marker. So my requirement is that when I hover on marker, it should increase in size to show that it is hovered. Till now I have success to detect the icon and change cursor pointer. Live example for this can be found at http://codepen.io/anon/pen/Wxzbjv

Javascript Code is as follows :

  var
    sourceFeatures = new ol.source.Vector(),
      layerFeatures = new ol.layer.Vector({
          source: sourceFeatures
      })
  ;

  var map = new ol.Map({
      target: 'map',
      view: new ol.View({
          center: [-5484116.753984261,-1884416.14606312],
          zoom: 16,
          minZoom: 2,
          maxZoom: 20
      }),
      layers: [
        new ol.layer.Tile({ 
            source: new ol.source.OSM(),
            opacity: 0.6
        }),
         layerFeatures
      ]
  });


          $(map.getViewport()).on('mousemove', function(e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
              return true;
            });
            targetStr=map.getTarget();
            targetEle=typeof targetStr==="string"?$('#'+targetStr):$(targetStr);
            if (hit) {
              targetEle.css('cursor','pointer');
            } else {
              targetEle.css('cursor','');
            }
          });


  var 
    fill = new ol.style.Fill({color:'rgba(255,255,255,1)'}),
      stroke = new ol.style.Stroke({color:'rgba(0,0,0,1)'}),
      style1 = [
          new ol.style.Style({
              image: new ol.style.Icon(({
                  scale: .7, opacity: 1,
                  rotateWithView: false, anchor: [0.5, 1],
                  anchorXUnits: 'fraction', anchorYUnits: 'fraction',
                  src: '//cdn.rawgit.com/jonataswalker/map-utils/' +                        'master/images/marker.png'
              })),
              zIndex: 5
          })
      ]
  ;


  var feature_start = new ol.Feature({
          geometry: new ol.geom.Point( [-5484116.753984261,-1884416.14606312])
      });
  feature_start.setStyle(style1);
  sourceFeatures.addFeatures([feature_start]);

Answer 1

look OpenLayers 3 Examples 'Vector Layer', modify displayFeatureInfo function code:

var displayFeatureInfo = function(pixel) {
    var feature = emap.map.forEachFeatureAtPixel(pixel, function(feature) {
        return feature;
    });

    if(feature){
        var array = featureOverlay.getSource().getFeatures();

        if(array){
            featureOverlay.getSource().clear();
        }

        var s = feature.clone();
        featureOverlay.getSource().addFeature(s);
        s.setStyle(getHighlightStyle(s));
    }
    else{
        featureOverlay.getSource().clear();
    }
};

Answer 2

Just get the reference of the feature (feature_start) and apply a new style on mouse over.

Something like this:

var
    sourceFeatures = new ol.source.Vector(),
      layerFeatures = new ol.layer.Vector({
          source: sourceFeatures
      })
  ;

  var map = new ol.Map({
      target: 'map',
      view: new ol.View({
          center: [-5484116.753984261,-1884416.14606312],
          zoom: 16,
          minZoom: 2,
          maxZoom: 20
      }),
      layers: [
        new ol.layer.Tile({ 
            source: new ol.source.OSM(),
            opacity: 0.6
        }),
         layerFeatures
      ]
  });


          $(map.getViewport()).on('mousemove', function(e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
              return true;
            });
            targetStr=map.getTarget();
            targetEle=typeof targetStr==="string"?$('#'+targetStr):$(targetStr);
            if (hit) {
              targetEle.css('cursor','pointer');
              feature_start.setStyle(style_big);
            } else {
              targetEle.css('cursor','');
              feature_start.setStyle(style1);
            }
          });


  var 
    fill = new ol.style.Fill({color:'rgba(255,255,255,1)'}),
      stroke = new ol.style.Stroke({color:'rgba(0,0,0,1)'}),
      style1 = [
          new ol.style.Style({
              image: new ol.style.Icon(({
                  scale: .7, opacity: 1,
                  rotateWithView: false, anchor: [0.5, 1],
                  anchorXUnits: 'fraction', anchorYUnits: 'fraction',
                  src: '//cdn.rawgit.com/jonataswalker/map-utils/' +                        'master/images/marker.png'
              })),
              zIndex: 5
          })
      ],
      style_big = [
          new ol.style.Style({
              image: new ol.style.Icon(({
                  scale: .7, opacity: 1,
                  rotateWithView: false, anchor: [0.5, 1],
                  anchorXUnits: 'fraction', anchorYUnits: 'fraction',
                  src: '//cdn.rawgit.com/jonataswalker/map-utils/' +                        'master/images/marker.png'
              })),
              zIndex: 5
          })
      ]
  ;


  var feature_start = new ol.Feature({
          geometry: new ol.geom.Point( [-5484116.753984261,-1884416.14606312])
      });
  feature_start.setStyle(style1);
  sourceFeatures.addFeatures([feature_start]);