The scripts do not allow the image to be resized

Struggling to resize an image while implementing a hover effect with css and javascript. The code I have so far is:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blonded</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <section class="gallery">
    <div class="imageContainer1">
    </div>

  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
  <script src="./hover-effect.js"></script>
  <script src="./app.js"></script>
</html>

CSS

.gallery {
  display: flex;
  padding: 2rem;
  justify-content: center;
  align-items: center;
}
.imageContainer1 {
  padding: 1rem;
  width: 75%;
  overflow: hidden;
  text-align: center;
}
#imageone {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}

JavaScript

new hoverEffect ({
  parent: document.querySelector('.imageContainer1'),
  image1: 'img/bdcmag2.jpg',
  image2: 'img/bdcmag.jpg',
  displacementImage: 'img/displacement.jpg',
})

Check out the result after running the code.

Answer №1

The height declaration for .imageContainer1 is missing in the code snippet provided. To adjust the height, you can simply add a height property like this:

.imageContainer1 {
  padding: 1rem;
  width: 75%;
  height: 100vh;
  overflow: hidden;
  text-align: center;
}

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

Tips on aligning objects within div elements

I am currently in the process of learning how to create websites. Below is the body tag of my website: <body> <h1 id="title">Title</h1> <div id="loginContainer"> <img id="usernameIcon" src="assets/images/usern ...

"Trouble with script: external JavaScript file failing to run

The issue lies in the fact that the specified external JavaScript file is not being executed: <script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script> Even when I try to directly access the URL, it downloads ...

FireFox - Dynamic Blinking Divs on Hover

It seems like in FireFox and IE, my hover effect is blinking for some reason. I can't figure out why this is happening. Should I switch to using JavaScript for my hovers or is there an easier CSS solution? Here's a JSFiddle link to demonstrate th ...

Playing around with jQuery to manipulate tables

Is there a way to exclude the first td from triggering a click event in jQuery? I want to prevent the dialog box from appearing when clicking on the first td of each row. jQuery("#list tbody tr").not(':first-child').click(function(){ //some cod ...

The challenge with handling matrix arrays in Javascript

In my simplified drag and drop shopping cart project using jqueryui, I am encountering an issue with adding data (id, name, price) to an array. Despite trying various methods to add the data array to the main container, I consistently encounter the error ...

What is the best way to ensure the search box remains fixed in the top navigation bar while maintaining a fluid and responsive design?

I've been struggling as a novice programmer, and even with the help of more experienced programmers, we haven't been able to figure it out. I'm trying to integrate a search box into the top navigation that adjusts responsively to different ...

Utilizing Texture3D for volume rendering necessitates the application of geometry translation

I have a query concerning texture3D. I am a newcomer to the realm of 3D. While exploring volume rendering, I stumbled upon this specific example here My inquiry pertains to these three lines of code. // line 119 - 122 // THREE.Mesh const geometry = new TH ...

Encountering challenges when adjusting height based on screen size in Angular 6

Utilizing HostListener to adjust the height based on screen size works well. However, during page load, "event.target.innerHeight" returns undefined until the browser height is changed. To address this issue, the value needs to be initialized. Initially, i ...

What steps do I need to take to link my form with Ajax and successfully submit it?

Here is my HTML code: {% extends 'base.html' %} {% block content %} <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create a Recipe ...

Removing information from a database using the delete function

I'm currently facing an issue while trying to delete an item from the database using a button that calls a delete function. Everything seems to be working fine, and I can see the API call for deletion in the console. However, the req.body is coming up ...

What is the proper way to change this JavaScript variable into JSON format?

I have a JavaScript variable containing data that I need to convert into valid JSON format for easier parsing. The current variable structure is as follows: { "machines": [{ "category": "Category 1", "items": [{ "name": "Te ...

What steps can I take to minimize the flashing of this fixed navigation bar?

My fixed navigation bar fades out when scrolling down the page and reappears when scrolling up, which all works well. However, I have noticed that if I do this very quickly with short movements, around 20 times, it doesn't have enough time to complete ...

How to retrieve the value of an element within a facebox div with jquery

On my page, I have two div tags displayed below. Whenever I try to retrieve the value of the itemName element using $('#itemName').val();, it always returns the value of the element in the first div (which is blank). Is there a way to access the ...

Leveraging custom properties in HTML elements with JavaScript

I am in the process of creating a straightforward battleships game that utilizes a 10x10 table as the playing grid. My goal is to make it easy to adjust the boat length and number of boats, which is why I'm attempting to store data within the HTML obj ...

"Exploring the Power of Perl in Harnessing Html5 Server-S

I have been working on implementing server sent events to replace ajax long polling within my application. However, I have encountered an issue with my perl script where the sleep function is causing the sending stream to be blocked. #!/opt/lampp/bin/perl ...

TypeORM's Polymorphic Relationship fails to retrieve data from the parent entity

Currently, I am utilizing https://github.com/bashleigh/typeorm-polymorphic for handling polymorphic relations in my model. There are several models involved: // Device Entity @Entity() @TableInheritance({ column: { type: 'varchar', name: 'ty ...

Can floated divs be prevented from collapsing without taking up any width?

Let's discuss an issue that is not related to block elements collapsing when their children are floated, and has nothing to do with clearing at all. Imagine having a set of floated divs like: <div class="column">Column 1</div> <div cl ...

Difficulty aligning headings in HTML

I'm puzzled by a strange 1px gap on the left of my h2 heading, which sits atop an h3. The font sizes are set to 40px for h2 and 12px for h3. Can anyone help me solve this mystery? Any assistance would be greatly appreciated! Thank you body { pa ...

How can I create a CSS Layout Template Module with a fixed footer?

Currently exploring the capabilities of the JQuery library for CSS Layout Template module Wondering if it's possible to set the height of a placeholder using *, allowing it to either push content down or fill up remaining space based on the viewport ...

Encountering an issue with Next.js React SSR using styled-jsx: unable to access the 'state' property as

I've come across a problem that I can't seem to figure out. Despite my attempts to search for a solution here, I haven't been able to help myself. I'm new to javascript and react, so please bear with me. Issue: I'm using React (1 ...