How do you make an image enlarge when you hover over it?

[johned]

I am having trouble having a thumbnail image enlarge when I hover over it.
The image enlarges when I hover over other areas of the page not just when I hover over the image. What do you think I am doing wrong to cause this? Also if I click on the thumbnail it opens up on another page. How do I prevent it from opening up on another page. I have the code I used here-http://codepen.io/Johned22/pen/vKzAyd

Thanks in advance

[Atelierbram]

I made this thing the other day:

http://codepen.io/atelierbram/pen/XKYxgZ

Note that this is marked up as an unordered list.

Also if I click on the thumbnail it opens up on another page. How do I prevent it from opening up on another page.

If you link to the larger images, you will need javascript. Almost all lightbox galleries have some on click event handler set to false or something to take care of this, so you can check one of those out.
Alternatively, if it is not important to link to a larger images, one can omit the url by replacing it with #! or #0 (last one to prevent jumping to the top of the page).

<div class="gallery gallery-thumbnails">
  <ul class="gallery-thumbnails_list">
    <li><a href="#!"><img src="//placehold.it/200/ffffff/bb3300" alt=""></a></li>
    <li><a href="#!"><img src="//placehold.it/200/ffffff/b39d0f" alt=""></a></li>
    <li><a href="#!"><img src="//placehold.it/200/ffffff/69298e" alt=""></a></li>
  </ul>
</div> 

[pctechtv]

As for the anchor tags (links) not opening up in the same window that is pretty easy. I edited two: http://codepen.io/pctechtv/pen/xOaJjQ But read about all your options: http://www.w3schools.com/tags/att_a_target.asp

I am not an expert at CSS animations so I will look more see what I come up with I am sure one of the more experienced members will comment on that. I will say I think you should look into jQuery or just JavaScript for that.

[Atelierbram]

In the other demo values for top and left and max-width were transitioned on hover, this fork of your demo transitions values for transform: translateZ.

[Author]

Posts