Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I'm currently working on a project to develop a photo gallery.

let img = document.createElement('img')
      img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png"
     // console.log(alldata[i].links[0].href)
     let border = document.createElement('div')
     border.appendChild(img)
     border.className = 'gallery'
       document.body.appendChild(border)
:root {
--wid: 300px;
}
.gallery{
   background: grey;
    width: var(--wid);
}
img{
   height: 250px;
   width: var(--wid);
}
img:hover { 
     transform: scale(1.5); 
    }

I'd like to achieve an effect where the image enlarges when a user hovers over it, but without altering its width. I've experimented with using transform: scale(1.5); and zoom:150%, both of which work fine; however, they result in the image's dimensions changing.

Is there a method to trigger a zoom-like effect that maintains the image's original width and height?

This website features a photo gallery showcasing a similar hover effect (the image slightly magnifies by around 110%).

Any feedback is greatly appreciated!

javascripthtmlcss

Answer №1

Here's a simple solution: just adjust the .gallery class to hide any overflowing content and incorporate a basic CSS transition for the img element.

Note: Consider utilizing object-fit to maintain the image's aspect ratio properly.

:root {
  --wid: 300px;
}

.gallery {
  background: grey;
  width: var(--wid);
  overflow: hidden;
}

img {
  display: block;
  height: 250px;
  width: var(--wid);
  transition: all .25s ease-in-out;
  
  /* Optional: to avoid skewing of aspect ratio */
  object-fit: contain;
}

img:hover {
  transform: scale(1.5);
}
<div class="gallery">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png" />
</div>

Answer №2

    :root {
      --wid: 300px;
    }

    .gallery {
      background: grey;
      width: var(--wid);
      overflow: hidden;
     
    }

    img {
      display: flex;
      height: 250px;
      width: var(--wid);
      transition: all .50s ease-in-out;
      
      /* Optional: to avoid skewing of aspect ratio */
      object-fit: contain;
    }

    img:hover {
      transform: scale(2);
    }
    <div class="gallery">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png" />
    </div>

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

"Placing drop-down animations in just the right spot

I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successfu ...

javascriptjqueryhtmlcss

Error: The function Object.setup() is undefined

I'm having an issue with my JavaScript setup function and array of ghost objects called ghosts. When I try to call the setup function on the last ghost object in the array, I receive this error message: Uncaught TypeError: ghosts[(ghosts.length - 1)]. ...

javascriptarrays

What is the process for extracting Html sub elements from parent elements?

While using my HTML editor, specifically the Kendo Editor, to generate bullets and indent them for sub-bullets, I noticed that the HTML output wasn't as expected. <ul> <li>Focusing on lifetime income replacement <ul>< ...

c#html

Interact with SOAP web service using an Angular application

I have experience consuming Restful services in my Angular applications, but recently a client provided me with a different type of web service at this URL: http://123.618.196.10/WCFTicket/Service1.svc?wsdl. Can I integrate this into an Angular app? I am ...

javascriptangulartypescriptrestweb-services

Ways to obtain a referrer URL in Angular 4

Seeking a way to obtain the referrer URL in Angular 4. For instance, if my Angular website is example.com and it is visited from another PHP page like domaintwo.com/checkout.php, how can I detect the referring URL (domaintwo.com/checkout.php) on my Angul ...

javascriptangulartypescriptangularjs-directiveangular-ui-router

Achieving Horizontal Alignment in a Dropdown Menu with Bootstrap 4

I am utilizing a dropdown that contains 3 main "categories", each with multiple checkboxes for filtering search results. Below is an example: <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">B ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Remove the default selection when a different option is chosen using Bootstrap

I have implemented the Bootstrap-select plugin () for a multiple select dropdown on my website. Upon page load, there is a default option that is already selected. See image below: https://i.stack.imgur.com/SzUgy.jpg <select id="dataPicker" class=" ...

javascriptjquerytwitter-bootstrapbootstrap-selectbootstrap-selectpicker

What could be causing this minimal Angular - WebTorrent configuration to fail?

The setup appears to be quite straightforward. Check out the Webtorrent usage reference here This is how I have my setup: import WebTorrent from 'webtorrent'; @Component({ selector: 'app-root', standalone: true, template: `bla` ...

javascriptangulartorrentwebtorrent

Creating dynamic ng-options in AngularJS

Below is an array: $scope.age = 2; $scope.people = [{name:"Sam",age:2},{name:"Pam",age:3},{name:"Ham",age:4}] The requirement is to make the ng-options dynamic. When age is 2, display all people objects in ng-options. If age is 1, show only the object wi ...

javascriptangularjsselectng-options

Connecting a href link to a TAB

Check out this useful CODE example I am using. I have a webpage with links that have href attributes. Now, I want to link these pages to another page and have them automatically open a specific tab when clicked. Is this possible? Here are the links on th ...

javascriptphpjqueryhtml

Guide to incorporating onchange event in a React.js project

Just starting out with reactjs and looking to incorporate onchange into my application. Utilizing the map function for data manipulation. handleChange = (event, k, i) => { this.setState({ dList: update(this.state.dList[k][i], { [ev ...

javascriptnode.jsreactjs

Using ng-repeat to iterate over an array of strings in Javascript

I am working with a JavaScript Array that contains strings: for(var i =0; i<db.length; i++) console.log(db[i]); When I run the code, the output is as follows: dbName:rf,dbStatus:true dbName:rt,dbStatus:false Now, I am trying to use ng-repeat to ...

javascriptangularjsangularjs-ng-repeat

Unable to retrieve the saved user from the Express.js session

Below is the code in question: app.post('/api/command', function (req, res, next) { var clientCommand = req.body.command; console.log("ClientCommand: ", clientCommand); if (!req.session.step || req.session.step === EMAIL) { ...

javascriptnode.jsexpress

Can you explain the distinction between align-content and align-items?

Can you explain the distinction between align-items and align-content? ...

csslayoutflexboxalignment

Adjusting a NodeJS module for easier integration into codebases

I have organized some functions in a file within a node module structure... Here are the files and folder structure I created: - package.json - README.md - LICENSE.md - code |_______ code.js Currently, to use these functions, I include them like th ...

javascriptnpmnode-modules

Capturing jQuery ajax requests in Angular

Within my Angular application, I am utilizing the integrated $.couch API from CouchDB. My goal is to intercept every ajax request, regardless of whether it originates from Angular's $http service or jQuery's $.ajax (which is utilized by $.couch). ...

javascriptjqueryangularjsajax

Emscripten WebAssembly: Issue with Exporting Class "Import #13 module="GOT.func" error: the module does not exist as an object or function"

Exploring the potential of WebAssembly in a project as an importable function module, I decided to dive into using C++ with Emscripten. Implementing functions was smooth sailing, but running into obstacles when it comes to classes. My goal is to expose and ...

javascriptc++node.jswebassemblyemscripten

How to Convert Irregular Timestamps in Node.js?

Currently, I am utilizing an API to retrieve information from Google News and proceed to save the data in Firestore. The challenge lies in the fact that the API delivers timestamps in various formats which are not uniform. For example: "1 Day Ago", "June ...

javascriptnode.jsarraysdatetimegoogle-cloud-firestore

What is the most efficient method for encoding and decoding extensive volumes of data for a JavaScript user?

Currently, I am in the process of developing a standalone Javascript application using Spine and Node.js to create an interactive 'number property' explorer. This application allows users to select any number and discover its various properties s ...

javascriptjson

Exploring the isolate scope within a compiled directive

I successfully managed to compile a directive using this piece of code: let element, $injector, $compile, link, scope; element = angular.element(document.getElementById(#whatever)); $injector = element.injector(); $compile = $injector.get('$compile& ...

javascriptangularjs