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

How can I use JavaScript to trigger a button click event inside an iframe element

Is there a way to retrieve the inner HTML contents of a clicked element in an iframe loaded content using JavaScript? This code uses jQuery: var elements = document.getElementsByTagName('iframe'); [].forEach.call(elements, function(elem ...

javascripthtmliframe

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

displaying notifications with:- $call = "SELECT * FROM `chat` WHERE fromthe = '$email' and tothe='theadmin' UNION ALL SELECT * FROM `chat` WHERE fromthe = 'theadmin' and tothe='$email' order by id desc"; mysqli_quer ...

javascriptphphtmlajaxmysqli

Create a JavaScript button that redirects to a different page within a React application

I am creating a div element using a for-loop and I want to link each div to the "/campaign" page with its respective id. When a div is clicked, I want it to navigate to the "/campaign/id" page and pass the id to the Campaign component. class Home extends ...

javascripthtmlreactjsreact-router

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxe ...

htmlcssflexbox

Leverage CSS variables within the `url('data:image/svg+xml')` function

Here is a CSS snippet I use to create a dashed border around a div: div { width: 100px; height: 100px; border-radius: 16px; background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w ...

csssvgcss-variables

Optimizing the display of multiple list items using Javascript for two separate UL elements on a single webpage

How can I display a maximum of 5 list items in two separate UL elements on the same page and hide the rest? Users should be able to see more items by clicking a dynamic "See more" element created by JavaScript. Below are the UL elements I want to work wit ...

javascriptjqueryhtml

Filtering dynamically generated table rows using Jquery

I'm currently working on a project that involves filtering a dynamic table based on user input in a search bar. The table contains information such as name, surname, phone, and address of users. Using jQuery, I have created a form that dynamically ad ...

javascriptjqueryhtml

Guide on shifting an element into a different one with the help of jQuery

I'm attempting to relocate an element within another in order to enable a css :hover effect. <ul> <li id="menu-item"> //move into here </li> </ul> <div class="tomove">...</div> 'tomove' is set to dis ...

javascriptjquerycss

Having trouble creating a full-screen modal with NgbModal by passing content as a component?

I've been using Bootstrap widgets and trying to create a full-screen modal where the header sticks on top, the footer stays at the bottom, and the body scrolls in the middle. Initially, I found a simple HTML solution for this: However, when I want to ...

cssangularbootstrap-4bootstrap-modalng-bootstrap

Different div elements are clashing with each other when it comes to hiding and

Having added multiple div elements with different IDs, I am facing an issue where clicking one div displays it while hiding the others. I am looking for a solution to prevent conflicts between the divs. Any suggestions on what might be causing this problem ...

javascripthtmljquerycss

Getting the css property scaleX with JQuery is as simple as executing the

I am struggling to print out the properties of a specific div element using jQuery. My goal is to have the different css properties displayed in an information panel on the screen. Currently, I am facing difficulties trying to show scaleX. Here is my curr ...

javascriptjqueryhtmlcss

Mobile devices are not showing the fixed header correctly

Recently, I was requested to lend a hand with a certain website: www.backincontrolbook.com Interestingly, when viewed on a PC browser, everything appears as intended. However, switching over to a mobile device (iPad and iPhone specifically), the header de ...

htmlwordpressmobileheader

Is the issue of Padding Overlap with Sidebar Item List getting in the way?

I am currently new to coding in HTML and CSS, so please bear with me if my code seems outdated or unconventional. I am working on creating a basic test website with a sidebar, but I'm encountering an issue where the items in my list are overlapping du ...

htmlcss

HTML 5 - GRUNT BUILD: The error message "Fatal error: Object has no method 'compact'" is causing issues with the build process

Currently, I am working on a project using GRUNT. However, I encountered an error while building the project: Running "cuff:dev" (cuff) task >> Building src/pages/home Fatal error: Object home.less has no method 'compact' The erro ...

htmlgruntjsnpm

Displaying local time alongside global time using PHP

I have a challenge - I am storing time in DATETIME format and now I need to display it in the local timezone. Does anyone know how to achieve this using PHP? ...

javascriptphphtml

There was a type error that occurred because the property 'addEventListener' could not be read from an undefined value

Encountering an issue with the JavaScript libraries three.js and OrbitControls.js despite following a tutorial: However, an error is being displayed in the console: Uncaught TypeError: Cannot read property 'addEventListener' of undefined at ne ...

javascripthtmlthree.js

Implementing full-height list elements using CSS

I'm still facing challenges with my lists... After receiving some assistance, I was able to create a horizontal list with perfect dimensions for my needs: each element taking up 33.33% width and adjusting its height based on the tallest element. I ac ...

htmlcsshtml-lists

Float over a specific line in a drawing

I am looking to develop a unique rating system using css, html, and potentially js : My goal is for the user to hover over a specific section of a circular stroke and have it fill with a particular color, all while maintaining functionality. So far, I hav ...

javascripthtmlcss

Tips for keeping the header section anchored to the top of the page

I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax e ...

javascriptjqueryhtmlcss

Adding items to a jCarousel using C# programming language is a simple process that involves following

I am struggling to display images in jcarousel using a C# Webmethod and jQuery Ajax. Here is my setup: My HTML structure: <div> <ul id="mycarousel" class="jcarousel-skin-tango" style="float: left"> </ul> </div ...

c#jqueryhtmljcarousel