How to make SVG larger on hover?

Question

How do I make each SVG section larger on hover. I am trying to replicate the way this interactive map does it: http://goo.gl/orvyYI

I have created a basic interactive map here to test with:

I have tried to implement the way they have done it using transform: matrix() and also have tried transform: scale() with no success.

CODEPEN DEMO

Harry · Accepted Answer

You can target the individual SVG element with class='section' using CSS and apply the required scale transform to it. Adding a transition to the element makes it grow smoothly.

The transform-origin setting is crucial to the whole piece as it specifies the point which should be used as the origin point for the transform.

.section:hover {
  transform: scale(1.2);
}
.section {
  transition: all 1s;
  transform-origin: 50% 50%;
}

$(document).ready(function() {
  $('.section').on('click', function(event) {
    var sectionID = $(this).attr('id');
    // Select the relevant popup window that has the same ID as the sectionID
    var popupWindow = $('.popup-window.lot-' + sectionID);
    $('.popup-window').not(popupWindow).hide();
    var leftPos = $(this).position().left;
    var topPos = $(this).position().top;
    popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
  });

  $('.close-button').click(function(event) {
    $('.popup-window').hide();
  });

});

body {
  position: relative;
  margin: 0, padding: 0;
}
.section:hover {
  fill: yellow;
}
.popup-window {
  width: 400px;
  height: 200px;
  background: #accee2;
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  padding: 20px;
}
.section:hover {
  transform: scale(1.2);
}
.section {
  transition: all 1s;
  transform-origin: 50% 50%;
}



  Lot Number: 1
  Section Size: 500
  



  Lot Number: 2
  Section Size: 600
  



  Lot Number: 3
  Section Size: 450

The effect that is seen in the website that you had linked is a bit more complex as there is a jerk at the end and it would require a cubic bezier for transition-timing-function (or) a keyframe animation.

transition-timing-function: cubic-bezier(.87,1,.6,.19);

$(document).ready(function() {
  $('.section').on('click', function(event) {
    var sectionID = $(this).attr('id');
    // Select the relevant popup window that has the same ID as the sectionID
    var popupWindow = $('.popup-window.lot-' + sectionID);
    $('.popup-window').not(popupWindow).hide();
    var leftPos = $(this).position().left;
    var topPos = $(this).position().top;
    popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
  });

  $('.close-button').click(function(event) {
    $('.popup-window').hide();
  });

});

body {
  position: relative;
  margin: 0, padding: 0;
}
.section:hover {
  fill: yellow;
}
.popup-window {
  width: 400px;
  height: 200px;
  background: #accee2;
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  padding: 20px;
}
.section:hover {
  transform: scale(1.2);
}
.section {
  transition: all 1s;
  transition-timing-function: cubic-bezier(.87,1,.6,.19);
  transform-origin: 50% 50%;
}



  Lot Number: 1
  Section Size: 500
  



  Lot Number: 2
  Section Size: 600
  



  Lot Number: 3
  Section Size: 450

Firefox doesn't seem to respect transform-origin setting when it is given a percentage value and so we would have to use specific pixel values for each child. The individual values are calculate as x position + width/2 and y position + height/2.

.section:nth-child(1){
  transform-origin: 612px  172px;
}
.section:nth-child(2){
  transform-origin: 612px  283px;
}
.section:nth-child(3){
  transform-origin: 612px  388px;
}

$(document).ready(function() {
  $('.section').on('click', function(event) {
    var sectionID = $(this).attr('id');
    // Select the relevant popup window that has the same ID as the sectionID
    var popupWindow = $('.popup-window.lot-' + sectionID);
    $('.popup-window').not(popupWindow).hide();
    var leftPos = $(this).position().left;
    var topPos = $(this).position().top;
    popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
  });

  $('.close-button').click(function(event) {
    $('.popup-window').hide();
  });

});

body {
  position: relative;
  margin: 0, padding: 0;
}
.section:hover {
  fill: yellow;
}
.popup-window {
  width: 400px;
  height: 200px;
  background: #accee2;
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  padding: 20px;
}
.section:hover {
  transform: scale(1.2);
}
.section {
  transition: all 1s;
  transition-timing-function: cubic-bezier(.87, 1, .6, .19);
}
.section:nth-child(1) {
  transform-origin: 612px 172px;
}
.section:nth-child(2) {
  transform-origin: 612px 283px;
}
.section:nth-child(3) {
  transform-origin: 612px 388px;
}



  Lot Number: 1
  Section Size: 500
  



  Lot Number: 2
  Section Size: 600
  



  Lot Number: 3
  Section Size: 450

Another thing to note is that CSS transforms on SVG elements don't work in IE as mentioned in this CodePen Article by Ana Tudor.

The matrix equivalent of this transform: scale(1.2) and the transform-origin setting would be the following: (Logic is explained here)

.section:nth-child(1):hover {
  transform: matrix(1.2, 0, 0, 1.2, -122.4, -34.46);
}
.section:nth-child(2):hover {
  transform: matrix(1.2, 0, 0, 1.2, -122.4, -56.67);
}
.section:nth-child(3):hover {
  transform: matrix(1.2, 0, 0, 1.2, -122.4, -77.57);
}

$(document).ready(function() {
  $('.section').on('click', function(event) {
    var sectionID = $(this).attr('id');
    // Select the relevant popup window that has the same ID as the sectionID
    var popupWindow = $('.popup-window.lot-' + sectionID);
    $('.popup-window').not(popupWindow).hide();
    var leftPos = $(this).position().left;
    var topPos = $(this).position().top;
    popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
  });

  $('.close-button').click(function(event) {
    $('.popup-window').hide();
  });

});

body {
  position: relative;
  margin: 0, padding: 0;
}
.section:hover {
  fill: yellow;
}
.popup-window {
  width: 400px;
  height: 200px;
  background: #accee2;
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  padding: 20px;
}
.section {
  transition: all 1s;
  transition-timing-function: cubic-bezier(.87, 1, .6, .19);
}
.section:nth-child(1):hover {
  transform: matrix(1.2, 0, 0, 1.2, -122.4, -34.46);
}
.section:nth-child(2):hover {
  transform: matrix(1.2, 0, 0, 1.2, -122.4, -56.67);
}
.section:nth-child(3):hover {
  transform: matrix(1.2, 0, 0, 1.2, -122.4, -77.57);
}



  Lot Number: 1
  Section Size: 500
  



  Lot Number: 2
  Section Size: 600
  



  Lot Number: 3
  Section Size: 450

How to make SVG larger on hover?

Answers (2)

Related Questions