Bootstrap Snippet Image move on mouse move using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
  <defs>
    <linearGradient id="foreGroundBlue">
      <stop stop-color="#00354e"></stop>
    </linearGradient>
    <linearGradient id="foreGroundBlueToLight" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#285e68"></stop>
      <stop offset="50%" stop-color="#00354e"></stop>
      <stop offset="100%" stop-color="#00354e"></stop>
    </linearGradient>
    <radialGradient id="backgroundRadial" spreadMethod="pad">
      <stop offset="0%" stop-color="#96bda2"></stop>
      <stop offset="130%" stop-color="#2b606a"></stop>
    </radialGradient>
    <linearGradient id="midTreeColor" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#477878"></stop>
      <stop offset="100%" stop-color="#044356"></stop>
    </linearGradient>
    <linearGradient id="bgTreeColor">
      <stop stop-color="#477878"></stop>
    </linearGradient>
    <filter id="veryHighBlur">
      <feGaussianBlur stdDeviation="2.5" in="SourceGraphic"></feGaussianBlur>
    </filter>
    <filter id="highBlur">
      <feGaussianBlur stdDeviation="1.5" in="SourceGraphic"></feGaussianBlur>
    </filter>
    <filter id="mediumBlur">
      <feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
    </filter>
    <filter id="lowBlur">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html {
  overflow: hidden;
}
body, html {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
body {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2YmRhMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJiNjA2YSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: radial-gradient(#96bda2, #2b606a);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
svg {
  position: fixed;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.foreground {
  fill: #00354e;
}
.lightForeground {
  fill: #285e68;
}
.bgTreeColor {
  fill: #477878;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Image move on mouse move"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Image move on mouse move" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Image move on mouse move"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY