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

What is the best way to modify the size of a canvas element while maintaining effectiveness?

I've encountered an issue while using Canvas to create a pie chart with chart.js. Despite adjusting the dimensions of the canvas element, it continues to take up the entire page. <canvas id="myChart" height ="200" width="200"></can ...

javascripthtmlcanvaschart.jsdimensions

Intercepting 401 with Angular 5 HTTP Interceptor recognizes it as status code 0

One issue I am currently facing is the inability to intercept a 401 status and redirect to the login page, which is a common practice in most applications. My interceptor code seems pretty standard: intercept(request: HttpRequest<any&g ...

htmlcssangularhttp

Applying CSS link dynamically in NextJS based on the window width

Is it feasible to adjust NextJS link stylesheets depending on media queries in the context of using css modules? Here is an example: CSS module file: @media(max-width: 800px) { .myClass{ /* ...mobile styles */ } } @media(min-width: 800px) { .myC ...

cssnext.jscss-modules

What is the best way to display images one by one from a map using a random fade effect?

I am in the process of creating a logo wall for a website. I successfully managed to display them randomly using a map, but now I want to make them appear one by one in a random order (for example: image 1, image 6, image 3, ...) and keep them visible once ...

javascriptcssreactjsnext.jsfade

Implementing the 'bootstrap tour' feature in a Ruby on Rails application

I have integrated bootstrap-tour.min.css and bootstrap-tour.min.js into my project. <script type="text/javascript" src='bootstrap-tour.min.js'></script> <link rel="stylesheet" type="text/css" href="bootstrap-tour.min.css"> Her ...

javascriptcssruby-on-railsrubytwitter-bootstrap

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?

I need help customizing my Forms Date Input to only allow selection of Thursdays, Fridays, and Saturdays. I've searched for a solution but haven't been successful so far. Is there any JavaScript or HTML code that can help me achieve this? Below ...

javascripthtmlreactjsdatecalendar

The CSS properties intended for ion-button elements are not taking effect

I'm attempting to set a background color when a ion-button is clicked or maintain the ion-ripple effect after it has filled the button in Ionic 4. I experimented with applying custom CSS states in global.scss, but encountered issues where the active ...

cssangularionic-frameworkionic4

Open the HTML document and access the file contents

I'm having trouble reading a text file from my computer onto a website. It works fine in Internet Explorer, but won't work in Chrome. I don't have much experience with HTML, so any help would be much appreciated! <html> <body> ...

javascripthtmlajaxgoogle-chrome

Is there a method for redirecting my page to a specific href link without triggering a page reload?

This is my HTML code. <a href="http://127.1.1.0:8001/gembead/emstones.html?car=36">Car</a> I am trying to redirect to a specific page with parameters without fully reloading the current page. Is there a way to achieve this task? I believe the ...

javascripthtmlajaxhttp-redirect

Is it possible to continuously refresh a DIV element?

After spending the past 4 or 5 hours scouring Stack and various other resources, I am still unable to find a solution to my problem. The issue at hand involves an Iframe within a page that displays 5 lines of information fetched from a database. This info ...

javascriptphpjqueryhtmlpage-refresh

One way to target a span inside a label element when a checkbox is checked using React Material UI createStyles is by using CSS selectors in combination with

I need help targeting the span element within a checkbox label in order to change its background color when the checkbox is checked. <div className={classes.container}> <input type="checkbox" id="checkboxid" /> <lab ...

cssreactjsmaterial-ui

Troubles arise when trying to encapsulate a ReactJS embedded application with Material ui, causing issues with the

Currently, I am integrating a ReactJS application using Material UI styled components within a Wordpress page. To achieve this, I am utilizing webpack for transpilation of the JavaScript. After generating the bundle for the embedded version of the applica ...

cssreactjswordpressmaterial-uiembed

Choose certain table cells that do not have an identifier or any classes assigned to them

My table has 3 rows and 3 data cells. To select the first row, first data cell, and all bold tags from it: tr + td b {} To select the second row, second data cell, and all bold tags from it: tr+tr > td+td b {} I need help selecting them without usi ...

htmlcss

Which method is better for HTML5/JavaScript GeoLocation: Passing data to a callback function or suspending an async call using promises?

Trying to figure out how to utilize HTML5/Javascript Geolocations effectively for passing location data to an ajax call and storing it in a database. The main challenges I'm facing are the asynchronous nature of the Geolocation call and issues with va ...

javascriptajaxhtmlasynchronousgeolocation

Comparison between Filament Group's loadCSS and AJAX technologies

The loadCSS library developed by Filament Group is widely recognized as the standard for asynchronously loading CSS. Even Google recommends its use. However, instead of using this library, some suggest utilizing ajax to achieve the same result. For example ...

javascriptcssajaxperformance

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

htmlcssinternet-explorerhtml-table

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

Unveiling the Power of Angular in Handling Date and Time

Recently, I encountered an issue with the following code snippet: <ng-template>{{date:'MM/dd/yyyy h:mm:ss a Z'}}</ng-template>. This code displays a date and time in one long line. My goal is to insert a line break between the date an ...

cssangularjs

Designing an advanced remote upload system using jQuery AJAX and PHP

Currently, I am in the process of developing an image hosting script and everything is going smoothly so far. To enable local uploading with drag & drop + AJAX, I have utilized various plugins which are working perfectly. Now, I am moving on to implementin ...

javascriptphpjqueryhtmlajax

An HTML document may display a segment of a URL

Is there a way to display part of a URL in an HTML document, so that if the URL changes, the corresponding content in the body also updates? For instance, www.example.com/?key=i - Is it possible for this link to be dynamically displayed within the body o ...

javascripthtml