Create a visually appealing Zoom Effect with CSS while ensuring the div size remains constant

Update: What should I do if the width size is unknown?

Check out the demo on JS Fiddle

If you visit the provided link, I am trying to achieve a zoom effect where only the image inside the div zooms, not the entire div itself. However, I seem to be missing something. Can anyone offer some guidance?

.img-container {
  position: relative;
  overflow: hidden;
  margin:0;
  padding:0;
  height: 100px !important;

}

.img-container img{
  height: 100px;  
  -moz-transition:all .8s;-webkit-transition:all .8s;transition:all .8s
}
.img-container:hover img{
  max-width:100%
  -moz-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);  
}
<div class="container">
<div class="row">
  <div class="col-sm-4">
    <div class="img-container">
      <img src="http://www.macforensicslab.com/images/icon_GoogleSearch.jpg"/>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="img-container">
      <img src="http://www.macforensicslab.com/images/icon_GoogleSearch.jpg"/>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="img-container">
      <img src="http://www.macforensicslab.com/images/icon_GoogleSearch.jpg"/>
    </div>
  </div>
</div>
<div class="row">
<div class="col-sm-4">
    <div class="img-container">
      <img src="http://www.macforensicslab.com/images/icon_GoogleSearch.jpg"/>
    </div>
  </div>
</div>
</div>

htmlcss

Answer №1

If your image width is 100px, make sure to set the container's width to width:100px;. 

.img-container {
  position: relative;
  overflow: hidden;
  margin:0;
  padding:0;
  height: 100px !important;
  width: 100px;
  
}

.img-container img{
  height: 100px;  
  -moz-transition:all .8s;-webkit-transition:all .8s;transition:all .8s
}
.img-container:hover img{
  max-width:100%
  -moz-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);  
}
<div class="container">
<div class="row">
  <div class="col-sm-4">
    <div class="img-container">
      <img src="http://www.macforensicslab.com/images/icon_GoogleSearch.jpg"/>
    </div>
  </div>
   </div>
  </div>

Answer №2

To ensure the proper functioning of the zoom effect, it is important to specify the width of the img-container.

Clarification:

If you wish to apply the zoom effect to only the first element, use the following CSS code:

.img-container {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100px !important;
  width: 100px;
}

.img-container img{
  height: 100px;  
  -moz-transition: all .8s; -webkit-transition: all .8s; transition: all .8s;
}

.col-sm-4:first-child .img-container:hover img{
  max-width: 100%;
  -moz-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);  
}
<div class="container">
<div class="row">
  <div class="col-sm-4">
    <div class="img-container">
      <img src="https://dummyimage.com/100x100/eee/000"/>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="img-container">
      <img src="https://dummyimage.com/100x100/eee/000"/>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="img-container">
      <img src="https://dummyimage.com/100x100/eee/000"/>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="img-container">
      <img src="https://dummyimage.com/100x100/eee/000"/>
    </div>
  </div>
</div>
</div>

Answer №3

There are two methods to accomplish this:

One approach is to utilize the CSS float property:

.picture-wrapper {
position: relative;
overflow: hidden;
margin:0;
padding:0;
height: 100px !important;
 float:left;
}

Alternatively, you can specify the width for the container.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

My website features two dropdown menus - one for selecting countries and another for cities. The country menu is populated with data from a database, and once a country is selected, the city dropdown is dynamically filled with corresponding cities using a ...

phpjqueryhtmlajax

Creating Images that appear optimized on smaller screens - the art of responsive design!

Currently, I am in the process of working on this test page located at the following link: While the page appears fine on my laptop screen, it is displaying poorly on my phone's browser. The images, in particular, appear disorganized and messy. Coul ...

htmlcssresponsive-design

How can you determine if multiple checkboxes have been checked with "if" statements following a button click?

I am looking to display a message after clicking a button if one or more checkboxes are checked. I would prefer using Jquery for this functionality. Any help on achieving this would be highly appreciated. $(function() { $(".btn").click(function() { ...

javascripthtmljquery

Tips for adjusting the color of a row when hovering

Can I modify the row color on hover in material-table using props? Similar to this example. Appreciate your help. ...

cssreactjsmaterial-uimaterial-table

How to Spin an Image in the Canvas Using HTML5

I am having trouble rotating an image inside a canvas after researching similar questions on Stack Overflow. Here's what I've learned: It seems I cannot rotate a single object inside the canvas. I can only rotate the entire canvas itself. ...

javascripthtmlcanvas

Is there a way to deactivate or dim a specific hour in an HTML time form?

I am currently facing a challenge with my booking form. I need to find a way to grey-out or disable the hours/times that have already been booked by previous customers. This will help ensure that the next person can select a different time slot. However, I ...

javascripthtmltime

What is the best way to showcase an array of objects in a table using AngularJS that updates

My technology stack includes angular.js for the front-end, node.js for server-side operations, and PostgreSQL for managing my database. Currently, I have a list of values stored in the database: Upon checking the controller code, I obtained the following ...

htmlangularjshtml-table

Having trouble with Angular2's Maximum Call Stack Exceeded error when trying to display images?

I am facing an issue in my Angular2 application where I am trying to display an image in Uint8Array format. The problem arises when the image size exceeds ~300Kb, resulting in a 'Maximum Call Stack Exceeded' error. Currently, I have been able to ...

javascripthtmlangularimage-rendering

What causes the difference in output between passing p=3+3 using GET, which results in 3 3, and using POST, which results in

It's really quite puzzling - I've noticed that sending the same parameter through various methods yields different results. ...

phphtmlformspostget

Exploring the capabilities of HTML5 canvas and integrating it with Selenium using Python

I have been working on testing a web server that is built using HTML5 with a canvas. While examining the source code for the login page, I noticed very minimal content. However, upon inspecting the element in Chrome, I discovered the following snippet: &l ...

pythonhtmlseleniumcanvas

best practices for creating space between flexbox items

My task involves presenting a continuous scroll list of scheduled jobs using Angular Material. Each item in the list needs to be divided into three columns utilizing flexbox. Despite my efforts, I am struggling with adding space between the columns within ...

cssangularflexboxangular-materialangular-cdk

Learn the technique of swapping out a portion of a string with a value from an input field in real-time

My webpage has a form on the left side where users can input text, and on the right is some static text. I want the text on the right to update automatically as the user types in the input field on the left. In my HTML code, it looks something like this - ...

javascriptjqueryhtml

What is causing the issue with CSS properties and media queries not being effective on specific elements?

I have been experimenting with React and SCSS to create a portfolio page. Although I am familiar with these tools, I recently encountered issues where certain style changes were not reflecting in the browser. One specific problem involved styling the head ...

cssreactjssassbrowserdeveloper-tools

Leveraging Angular to dynamically adjust the height of ng-if child elements based on parent

I'm struggling with a few things in my current setup. I have a view that consists of 3 states - intro, loading, and completed. My goal is to create a sliding animation from left to right as the user moves through these states. Here is the basic struc ...

javascriptcssangularjsangularjs-directive

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

javascripthtmlcss

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

I am working with the following HTML code: <html> <BODY> <DIV ID="holder"> <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV> <DIV ID="main_area">BODY CONTENT GOES HERE</DIV> ...

phpcsshtml

Problems arise when using AngularJS' .run function after navigating to a different page

I have encountered an issue with ngRoute while navigating between pages in my web application. The main login page is called index.html, and the routing is controlled by the main js file. However, I face a problem when trying to use a .run block on a speci ...

javascripthtmlangularjs

Retrieving information from a dynamically generated HTML table using PHP

I have successfully implemented functionality using JavaScript to dynamically add new rows to a table. However, I am facing a challenge in accessing the data from these dynamically created rows in PHP for database insertion. Below, you will find the HTML ...

javascriptphpjqueryhtmlcss

Convert Soundcloud thumbnail into a printable format using the @media print CSS rule

For those wanting to add an embedded Soundcloud player on a blog: <iframe width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_p ...

htmlcssprintingmedia-queriessoundcloud

A unique way to present data: An HTML table featuring four fixed columns with horizontal scrolling

I've been having difficulty creating a table with fixed first four columns while allowing the rest to scroll horizontally. I came across this example first column fixed Although the example has the first column fixed, I'm struggling to extend it ...

csshtml-table