Enlarge an image when hovering over it

Question

Enlarge an image when hovering over it

I am currently in the process of creating a website and I have encountered an issue. When I hover over an image, I want it to zoom in, but unfortunately it does not zoom within the designated div area. How can I fix this problem?

<div class="container">
  <img src="image.jpg" alt="" height="400" width="500"/>
</div>

Here is my CSS styling:

.container{
  height: 400px;
  width: 500px;
  border: 2px solid red;
}
.container:hover img{
  height: 500px;
  width: 600px;
}

You can view a demo on FIDDLE.

html css

Answer 1

Answer №1

Could it be something similar to this JS Fiddle?

.container {
  height: 400px;
  width: 500px;
  border: 2px solid red;
  overflow: hidden
}
.container img {        /* apply this style */
  width:100%%;;
  height:100%;
  transition:all 0.7s ease-in-out;
}
.container:hover img {   /* modify this style */
  width:120%;
  height:120%;
  margin:-10% 0 0 -10%;
  transition:all 0.7s ease-in-out; 
}

<div class="container">
  <img src="http://motivationhacks.org/wp-content/uploads/2015/07/steve-jobs-black-white.jpg" alt="" height="400" width="500" />
</div>

Answer 2

Could it be something similar to this JS Fiddle?

.container {
  height: 400px;
  width: 500px;
  border: 2px solid red;
  overflow: hidden
}
.container img {        /* apply this style */
  width:100%%;;
  height:100%;
  transition:all 0.7s ease-in-out;
}
.container:hover img {   /* modify this style */
  width:120%;
  height:120%;
  margin:-10% 0 0 -10%;
  transition:all 0.7s ease-in-out; 
}

<div class="container">
  <img src="http://motivationhacks.org/wp-content/uploads/2015/07/steve-jobs-black-white.jpg" alt="" height="400" width="500" />
</div>

Answer 3

Answer №2

If you want to hide the overflow of content in a div, simply add the CSS property overflow: hidden. This will clip the content and make the rest of it invisible.

.box{
  height: 300px;
  width: 400px;
  border: 1px solid blue;
  overflow: hidden
}
.box:hover img{
  height: 350px;
  width: 450px;
}

Answer 4

If you want to hide the overflow of content in a div, simply add the CSS property overflow: hidden. This will clip the content and make the rest of it invisible.

.box{
  height: 300px;
  width: 400px;
  border: 1px solid blue;
  overflow: hidden
}
.box:hover img{
  height: 350px;
  width: 450px;
}

Answer 5

Answer №3

To achieve a more effective result, consider implementing the scale transition CSS property in the following manner:

.box{
  height: 300px;
  width: 400px;
  border: 1px solid blue;
  overflow: hidden;
}

.box:hover img{
  transform: scale(1.5);
}

By incorporating the scale property, the image will smoothly enlarge on all screen sizes, including mobile devices, eliminating the need to specify individual height and width values for each device.

I trust you find this information helpful :)

Answer 6

To achieve a more effective result, consider implementing the scale transition CSS property in the following manner:

.box{
  height: 300px;
  width: 400px;
  border: 1px solid blue;
  overflow: hidden;
}

.box:hover img{
  transform: scale(1.5);
}

By incorporating the scale property, the image will smoothly enlarge on all screen sizes, including mobile devices, eliminating the need to specify individual height and width values for each device.

I trust you find this information helpful :)

Enlarge an image when hovering over it

Answer №1

Answer №2

Answer №3

Similar questions

Vanishing Submenus

Complete alignment of several elements in a horizontal scrolling container

Preloading and rendering an image onto a canvas in a Vue single-page application is not functioning as expected

Utilize the serialized data to pre-fill the form fields

Is it possible to combine numerous -webkit-transition animations in my css code without using keyframes?

The svg line is drawn with a width that is half of the specified width

The width of the Div element is not following the specified dimensions, and it also has an unspecified margin

Html content overlapping div rather than being stacked vertically

Creating a dropdown menu that seamlessly populates elements without any empty spaces

Node.js application for changing attributes in an HTML string

What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

Overruled fashion

Utilizing ng-class with Boolean values in AngularJS

Exploring jQuery's ability to retrieve CSS values

CSS: Achieving Layered Effect with Child Image Over Parent Background Image

Jquery onchange event fails to fire

What is the best method for organizing data in rows and columns?

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

Issues with font face rendering on Android Chrome and Firefox devices

Can you please provide instructions on how to implement an ng-repeat loop within an HTML table?