• HTML
• CSS
• JS

HTML

<div class="container">

    <img src="one_piece_2.jpg" alt="" id="imagen">
    <div class="buttons">
        <ion-icon name="add-circle-outline" id="suma"></ion-icon>
        <ion-icon name="remove-circle-outline" id="resta"></ion-icon>
    </div>
    
</div>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

CSS

body {
    
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  background:#e74c3c;
  
}
.container{
    width:500px;
    height:284px;
    background:#17202a;
    overflow:hidden;
    cursor:crosshair;
    position:relative;
}
.container img{
  width:100%;
  user-select:none;
}
.container .buttons{
    display:flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background:rgba(0,0,0,0.8);
    color:#fff;
    cursor:pointer;
    border-radius:3rem;
}
.container .buttons ion-icon{
    padding:0.3rem 0.5rem;
    font-size:2rem;
}

JS

let suma  = document.querySelector('#suma');
let resta = document.querySelector('#resta');

let           zoom = 1;
const zoomingSpeed = 0.1;

let imagen = document.querySelector("#imagen");

suma.addEventListener("click",() =>{

    imagen.style.transform = `scale(${(zoom += zoomingSpeed)})`;
});
resta.addEventListener("click",() =>{

    imagen.style.transform = `scale(${(zoom -= zoomingSpeed)})`;
});