th30d0rab1e th30d0rab1e - 3 months ago 10
CSS Question

CSS Hover Images

I'm working on a site for some old guys who love cars. They're previous photo gallery is no longer in service and they asked me if I could make a new one. I wanted it as simple as I could make it. And so I made a table of images, that are small. Once you hover the mouse over an image it becomes larger, these guys told me they liked my idea. If you click on the image it will go straight to the image URL.

The problem is the transition from the original size to the larger one makes this glitchy look over the hover. I would like the transition to be smoother, any suggestions?

Here's the link to the site - http://tcrgv8club.org/photogallery.php

Here's my CSS code:

.model img{
width: 125px;
height: 100px;
border: 2px solid black;
z-index: 0;
}

img:hover {
width: 500px;
height: 450px;
z-index:1;
position: absolute;
}

.model td{
padding: 10px;
}

Answer

I would recommend using transform: scale as changing width/height will break your layout flow.

.model img {
  width: 125px;
  height: 100px;
  border: 2px solid black;
  position: relative;
  transition: z-index 0s, transform 0.5s;
}
img:hover {
  z-index: 1;
  transform: scale(2.5);
}
<div class="model">
  <img src="http://placehold.it/100x100" alt="">
  <img src="http://placehold.it/100x100" alt="">
  <img src="http://placehold.it/100x100" alt="">
</div>