Can you show me how to magnify multiple images when hovering over them without altering their dimensions?

I am working on a gallery that features multiple images and I want the images to zoom in when hovered over without resizing the container. My project is built using Bootstrap 4.

<div class="row">
 <div class="col-12"><img class="galleryimg" src="images/3GALLERY-1A.jpg" width="100%" height="" alt=""/></div>
 <div class="col-12 "><img class="galleryimg" src="images/3GALLERY-2A.jpg" width="100%" height="" alt=""/></div></row>

css-------------------------------------------------------------------------------------------------------------------------------------------------------------------

img.galleryimg{
    width: 100%;
    transition: 0.4s ease;
    transform-origin: 50% 50%;}

img.galleryimg:hover{
    transform: scale(1.2);
    width: 100%;}
htmlcssimageanimationzooming

Answer №1

Consider making a change to this line:

transition: 0.4s ease;

by modifying it to:

transition: transform 0.4s ease;

This adjustment should resolve the issue you are experiencing.

UPDATE: To achieve the zoom effect as demonstrated, try implementing the following code snippet:

.col-12 {
  /* Adjust dimensions accordingly */
  height:100px;
  width:100px;
  overflow:hidden;
}

img.galleryimg{
    width: 100%;
    transition: transform 0.4s ease;
    transform-origin: 50% 50%;}

img.galleryimg:hover{
    transform: scale(1.2);
    width: 100%;}
<!-- Example image used -->
<div class="row">
  <div class="col-12"><img class="galleryimg" src="https://www.gravatar.com/avatar/ecad24d406a8b8fd5753363a4f691d9a?s=32&d=identicon&r=PG&f=1" width="100" height="100" alt="" /></div>
  <div class="col-12 "><img class="galleryimg" src="https://www.gravatar.com/avatar/ecad24d406a8b8fd5753363a4f691d9a?s=32&d=identicon&r=PG&f=1" width="100" height="100" alt="" /></div>
</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

The People and Groups selection dialog is displaying incorrectly in IE 10

I've been working on a Sharepoint web application and have created a site column of type “People or Group”. This should be automatically associated with a user selection dialog as shown below: However, as you can see in the image above, the users ...

javascriptjqueryhtmlcsssharepoint

Executing a Firebase JavaScript script on a remote web server client

I have limited experience with Javascript and I am struggling to get my code to execute. I have already completed the Android java portion, but when I attempt to run the html file, nothing happens. I am unsure if there are bugs in my code or if it needs to ...

javascripthtmlfirebase

Guide to Aligning Divs at the Center in Bootstrap 4

I've been attempting to center the div on the page using Bootstrap 4, however, it's not cooperating. I've tried using the margin:0 auto; float:none property as well as the d-block mx-auto class, but neither are working. Below is my HTML code ...

javascriptjqueryhtmlcsstwitter-bootstrap

Swap out the div block with a new one

I am currently facing an issue with my JavaScript code. The code is supposed to remove block1 and replace it with block2 when an onclick function is triggered. function buyerclick() { div = document.getElementById('block2'); div.style.displa ...

javascriptjqueryhtml

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

I have designed tabs using the <button> element and enclosed the tab content within separate <div></div> tags like shown below: function displayTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsB ...

javascripthtmlcss

Is there a way to navigate to a specific div when clicking on it?

Need help with scrolling after running code function scrollFunction() { document.getElementById('insert').scrollIntoView(); } I have a button that triggers some code and I want the page to scroll afterwards. Currently, it scroll ...

javascripthtmlasp.netvb.net

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...

javascriptjqueryhtmlcss

Angular 4 - Issue with Top Navigation Bar not remaining fixed at the top of the page

I'm having trouble finding a solution to keep the top navigation bar fixed at the top of the screen without allowing it to scroll when the page becomes too long. I want to prevent the top nav bar from scrolling and maintain its position at the top of ...

htmlcssangularangular-material2

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

javascripthtmlcss

Updating the background of a specific div element by retrieving data from an SQL database

I have a unique situation where I have a div element with the property set to runat="server" and an ID assigned to it. I am attempting to dynamically set the background image for this specific div from a MySQL database where the path URL is stored in a r ...

mysqlcssasp.netvb.netdynamic-css

Issues are arising with Angular Form where the FormControl is not being properly set up for the first field in my form

After grappling with this issue for several weeks, I am still unable to pinpoint the cause. (Angular version: 16.1.4) The form component is populated using a BehaviorSubject, and although the console prints out the correct values for both the form and dat ...

htmlangulartypescriptformsangular-reactive-forms

What could be causing the issues I am encountering while using IE8?

My website looks great on all browsers except for Internet Explorer. I am currently using Internet Explorer 8 to test it. I've tried using a conditional stylesheet (ie.css) to fix some issues, but there are a few problems that have me stumped. I am op ...

jquerycssinternet-explorerinternet-explorer-8

Instructions for converting a MySQL select statement within a foreach() loop into an HTML form

I'm in the process of developing a course registration system for a small project. Currently, I have a table named 20182019carryovertbl from which I successfully select students who are carrying over their courses. Now, I need to transform this select ...

phphtmlsql

Arrange list items dynamically using ajax

I am attempting to adjust the positioning of the scrollable list item depending on whether a message was sent by a user or another party. However, my current method is not yielding the desired results. I have experimented with adding .css('position&a ...

javascriptjqueryhtmlcssajax

The dynamic addition of the active class is malfunctioning

I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code: <div class="col-md-15 col-sm-3" ng-repeat="data i ...

jqueryhtmlcssangularjs

Establishing a Connection with Node/Express Routing via JavaScript

When developing a web application using HTML, JavaScript, and Node.js with Express, I often find the need to navigate between pages based on user actions. In HTML, one approach is to add an href link and then set up routes in my app.js file to handle the ...

javascriptjqueryhtmlnode.jsexpress

Using an Image to Directly Link to Your Own Video Hosting Site

I'm encountering an issue where clicking on an image link to a hosted video results in the browser prompting to download the video instead of playing it directly. I've tried adjusting between absolute and relative paths in my code, but it hasn&ap ...

htmlvideomp4

When hovering over the menu list, the background-color of the text area remains the same

I am facing an issue with my list menu. The hover effect changes the background color only in the box area, but not in the text area. I would like to figure out a way to make both areas change color on hover: Here is the code snippet: <div class="se ...

csslistmenubackgroundhover

Displaying a subset of categories based on the user's selection

I have been trying to find a solution to automatically display a subcategory select drop-down only when a user selects a category. If no category is selected, the subcategory drop-down should remain hidden. I have searched online tutorials and videos for ...

javascriptphphtmlcategories

What is the method for showcasing an h1 heading and an unordered list link side by

Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...

htmlcsshtml-listsinline