Scale and center image on hover

Question

I am designing user guides for my company and need to find a better way to view the images. I have got scaling on hover to work fine, but this will only work properly if the user has a large computer screen when viewing the image. I therefore want to center the image on hover.

In addition it would be lovely to let the image scale in relation to the window size. I have bootstrap and jQuery is linked.

My code for it at this moment

  .thumbnail { transition: transform .5s, left .5s; /* Animation */ margin: 0 auto; z-index: 2; } @media (min-width: 1600px) { .thumbnail:hover { transform: scale(1.75); }} @media (max-width: 1600px) { .thumbnail:hover { transform: scale(1.5); position: relative; left: 25%; }} 

  <img src="http://via.placeholder.com/350x150" class="thumbnail" style="width:800px; height:auto"> 

The big problem is the side menu who is part of the template on the business website. Click this link to see.

Answer 1

Use the object-fit property for the img

.thumbnail {
 object-fit: cover;
}

Answer 2

If you haven't link bootstrap and jquery please first link them.Within style tag replace your current code with this.(this is responsive as well).

<style>   
.zoom {
    padding: 50px;
    transition: transform .2s; 
    margin: 0 auto;
    border :none;
}

.zoom:hover {
    transform: scale(1.2); 
    }
</style>

And add "zoom" to your class in img tag.

<img src="http://via.placeholder.com/350x150" class="thumbnail zoom" style="width:800px; height:auto">

Answer 3

 .thumb-div { overflow: hidden; } .thumb-div img { -webkit-transition: ease all 0.3s; -moz-transition: ease all 0.3s; -o-transition: ease all 0.3s; transition: ease all 0.3s; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .thumb-div:hover img { -webkit-transform: scale(1.1) rotate(0.1deg); -moz-transform: scale(1.1) rotate(0.1deg); -ms-transform: scale(1.1) rotate(0.1deg); -o-transform: scale(1.1) rotate(0.1deg); transform: scale(1.1) rotate(0.1deg); } 

 <div class="thumb-div"> <img src="http://via.placeholder.com/350x150" title="" alt="" /> </div>