<h3 id="log"></h3>
<div class="picture">
  <div class="flare">
		<div class="subflare subflare1"></div>
		<div class="subflare subflare2"></div>
		<div class="subflare subflare3"></div>
	</div>
	<img src="https://static.pexels.com/photos/59576/pexels-photo-59576-large.jpeg"/>
</div>
body {
  position: relative;
  background: #aaa;
}
.picture {
  position:relative;
  width: 50%;
  margin: 100px auto;
  img {
    width: 100%;
  }
}

.flare {
	//transform: rotate(0deg);
  position: absolute;
  left: 0;
  top: 0;
  width: 2%;
  height: 1px;
	transform-origin: 0 0;
  background: rgba(255,255,250,1);
  box-shadow: 0 0 8px 5px rgba(255,255,250,0.3);
    &:after, 
		&:before {
      content:' ';
      position: absolute;
      left: 20%;
      top: -2px;
      width: 5px;
      height: 5px;
      background: rgba(255,255,250,1);
      border-radius: 50%;
      box-shadow: 0 0 20px 35px rgba(255,255,250,0.3),
        0 0 4px 15px rgba(255,255,250,0.3);
    }
	&:before {
		width: 20%;
		left: 10%;
		box-shadow: 0 0 20px 10px rgba(255,255,250,0.7)
	}
	
	.subflare {
		position:absolute;
		border-radius: 50%;
		background:rgba(255,255,250,0.3);
		left: 20%;
		transform: translateX(-50%);
		
		&.subflare1 {
			top: 130px;
			width: 80px;
			height: 80px;
			box-shadow: 0 0 3px 1px rgba(255,255,250,0.2);
			background:rgba(255,255,250,0.1)
		}
		&.subflare2 {
			top: 100px;
			width: 50px;
			height: 50px;
			box-shadow: 0 0 1px 1px rgba(255,255,250,0.6)
		}
		&.subflare3 {
			left: 24%;
			background:rgba(50,50,50,0.05);
			top: 40px;
			width: 120px;
			height: 120px;
			//box-shadow: 0 0 1px 1px rgba(50,50,50,0.6)
		}
	}
}

View Compiled
var flarement = $('.picture .flare')
var posX0 = $('.picture').offset().left;
var posX1 = posX0 + $('.picture').width();
//$('.picture').mouseenter(function(){

$('.picture').mousemove(function( event ) {
	if ((event.pageX > posX0) && (event.pageX < posX1)) {
  var msg = "";
  msg += event.pageX + ", " + event.pageY;
  $( "#log" ).html( "<div>" + msg + "</div>" );
	console.log(msg)
	flarement.css({ 
		//transform: 'rotate(' + (event.pageX -700 )/50 + 'deg) translateX(' + event.pageX -500 + 'px)'	
	transform: 'translateX(' + (event.pageX -posX0) + 'px) rotate(' + ((event.pageX -posX0 )/10 -20) + 'deg)'	
	})
}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js