Someone knows how can I have a fixed tag div that does not affect the floating mode on the div tag. It affects the div tag when moving the mouse over the image.
https://codepen.io/Hossi/pen/BgLBzW
The only thing you have floated is the <li> s in the <nav> so nav { position:fixed; top:0; } will keep your nav at the top of the page. If that’s not what your asking can you explain further?
not working !
When the mouse enters the box, the image becomes large(zoom). But as you saw, not only the photo but the frame changes simultaneously with the photo. In fact, I want to zoom only on the photo.
My code works on the <nav>. Tested in your pen. Thank you for clarifying your question.
You are changing the width and height of the image inside the li on hover, you can give the li a fixed height, but really I’m not sure why you are doing it the way you are. The .caption is also not centered correctly.
Instead of the JS stuff, why not just use a transform: scale() on the image?
https://codepen.io/anon/pen/MMjEzZ
Also, the image dimensions do not really work for this.
The answer you seek is that the animation increases the size of the <img> which pushes the padding out and the border as well. With your code “as is” you need to set a height and width on your div.stable greater than the maximum size after animation. Here is a pic of your pen with an exaggerated size for your exploration.
Notice also that in your javascript window I changed your selector from
li img to img. div img also works. I mention this because you have a <div> as a child of <ul> and an <li> as a child of a <div>. Both of which should not be.jquery ui is using a ‘div’ as the basis for your widget, knowing that, you should be able to correct your HTML with the JS still working. PS some of your script is returning undefined.
1 Like
because my teacher asked to do it with JS
thank you by the way
actually i have to do it with JS … but i couldn’t … thanks