5

I am an oracle guy and am struggling to write an HTML function, I would really appreciate your help. What i want to achieve is i have a 4 picture or one pictures with 4 parts, and once the mouse over each part it needs to pop out or get zoomed in. enter image description here ultimately i want once the mouse hover any part to pop out, FYI i can have the part saved as pictures. so the original picture will be split into 4 parts. please share the code to do so, or if you have any information please let me know, your help is highly appreciated

thanks in advance

user2730114
  • 75
  • 2
  • 9

1 Answers1

14

The easiest way to achieve the pop effect would be to apply a CSS 2D scale transform when hovering over the element. Something to this effect:

.part {
  background-color: #ddf;
  padding: 30px;
  margin: 10px;  
  border: 1px solid #333;
  transition: 0.15s;
}
.part:hover {
  transform: scale(1.02);
}
<div class='part'>Part 1</div>
<div class='part'>Part 2</div>
<div class='part'>Part 3</div>
<div class='part'>Part 4</div>
Michael Arrison
  • 1,464
  • 2
  • 13
  • 22