zoom button css code example

Example 1: zoom image css

/*Zoom on hover*/

<style>
.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom)*/
}
</style>

<div class="zoom"></div>

/*credits: w3schools.com */

Example 2: on hover zoom card

transform: scale(1.5);

Example 3: zoom with button d3

let zoom = d3.zoom().on("zoom", zoomed);

let svg = d3.select("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .style("background-color", "#eeeeee")
  .call(zoom)
  .on("dblclick.zoom", null);
let g = svg.append("g");
//d3.selectAll("#zoom-section i").on("click", zoomClick);
g.append("circle").attr("r", 50).attr("fill", "red");
d3.select("#zoom_in").on("click", function() {
  zoom.scaleBy(svg.transition().duration(750), 1.2);
});
d3.select("#zoom_out").on("click", function() {
  zoom.scaleBy(svg.transition().duration(750), 0.8);
});

function zoomed() {
    g.attr("transform", d3.event.transform);
}