So I discovered that it's possible to make an image pan left or right using CSS3. Here's an example:
HTML
<html>
<div>
<img src="pic.png" class="pan">
</div
</html>
CSS
.pan:hover {
margin-right: -50px;
}
That's a basic explanation of how it works.
However, is there a way to make the image pan in the direction of the mouse movement over the image itself? Can this be achieved with CSS?
By incorporating some additional markup, you can achieve the following:
html,
body {
height: 100%;
}
.box {
position: relative;
height: 100vh;
overflow: hidden;
}
.box img {
max-width: 100%;
transition: all .5s;
}
.left {
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 50%;
bottom: 0;
background: pink;
opacity: .3;
}
.left:hover ~ img {
transform: translateX(-50%);
}
.right {
position: absolute;
z-index: 1;
left: 50%;
top: 0;
right: 0;
bottom: 0;
background: lightgreen;
opacity: .3;
}
.right:hover ~ img {
transform: translateX(50%);
}<div class="box">
<div class="left"></div>
<div class="right"></div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wikipedia_Administrator.svg/1024px-Wikipedia_Administrator.svg.png" />
</div>It's important to note that the elements being targeted actually overlay the image and may interfere with clicking or selecting that particular element.
Unfortunately, without the use of JavaScript, CSS is unable to detect the direction in which the mouse moves. It can only determine if the mouse is currently hovering over an element.
After experimenting, I discovered a neat CSS trick that creates a sliding effect on images. While it's possible to achieve this with CSS alone, using JavaScript allows for more dynamic mouse movement detection.
Here's how I created an image panning effect:
Start by creating a container div and centering all the elements inside. Set the width of the container to twice the width of your image, assuming a 300px by 300px image size.
HTML:
<div class="container"></div>
CSS :
.container {
display: flex;
justify-content: center;
width: 600px;
height: 300px;
}
Inside the container, place your image along with two additional divs – one before and one after the image.
<div class="container">
<div class="left"></div>
<img src="yourimage.png" alt="">
<div class="right"></div>
</div>
Ensure that the two extra divs match the height of your image and have half its width, while also setting their position to relative.
.left,
.right {
height: 100%;
position:relative;
width: 150px;
}
To create the hovering effect, position the left div to hover over the left side of the image and the right div over the right side.
.left {
left: 150px;
}
.right {
right: 150px;
}
On hover, add padding to both divs in opposite directions to move the image accordingly.
.right:hover {
padding-right: 50px;
}
.left:hover {
padding-left: 50px;
}
Since the container centers all elements, any padding added to one div will affect the positioning of other elements within the container.
View the interactive demo here: https://jsfiddle.net/L5c6xyLh/1/
My project involves creating a website that features various Java tasks and informational content. Users can navigate through different pages by clicking on links from the homepage. Specifically, on the Java page, users will be able to complete tasks. Th ...
Recently, I have encountered an issue with a button on my webpage. Every time the button is clicked, the onclick code executes and then the page refreshes. This was not a problem before, but now it seems to be automatically refreshing the page. The curren ...
We have stored worker information in MongoDB. Now, how can we display that information on an HTML home page? Here is the code I used to save the data: //routes.js var Employee = require('../app/models/employee'); app.post("/addEmployee", (req ...
Issue I am facing a problem with deleting one of the components that contains a chart. Even after deleting the component, the chart remains visible. To see an example, check out this jsfiddle: https://jsfiddle.net/m4ywp5fc/4/ Solution Attempted I attem ...
I have encountered a scenario in my application where there is an array with multiple arrays nested inside: https://i.sstatic.net/3uHP9.png I am looking to transform this structure: [ { "tag": [ { "key": "asda ...
Currently, I have a table with the following structure. <table> <tr> <td id="divOne">div one</td> <td id="divOne">2222</td> </tr> <tr> <td id="divOne">d ...
Upon examining various CSS files across different websites, I've noticed comments similar to the one below: /* Theme Name: CSSnewbie V2 Theme URI: http://www.cssnewbie.com Description: Second version of CSSnewbie, based on Carrington theme by Crowd ...
Here is the setup I currently have: <div> <input> <input> <textarea> </div> I am looking to align the tops of the inputs and the textarea within the div. However, it seems like the inputs are at the bottom and the t ...
I encountered an issue while using Joomla! 2.5.8 and Virtuemart 2.0.18a where I received the error message "Typeerror $.facebox is undefined in vmprices.js (line 67)" when attempting to Add to Cart. Interestingly, switching back to the default Joomla! temp ...
Hey there, I'm diving into the world of programming languages like CSS and looking for a little guidance. I've been troubleshooting my code for more than 24 hours now and need some fresh eyes to help me out with a couple of issues I can't se ...
There are three radio buttons that correspond to school, restaurant, and store. Clicking on each button should display nearby locations of the selected type. Displaying Google Map and nearby places individually works fine without any issues. class Propert ...
When implementing the function below on an HTML page to show/hide more details about a comment, there is an issue where the page scrolls up to the top whenever the "read more" link is clicked. This can be frustrating as it takes the user away from the comm ...
Currently in the process of setting up a nodeJS server using express. I have two backend files: one named account.js in a directory called routes, and the other named server.js. However, I'm encountering an issue where it fails to run due to an error ...
My user service code looks like this: 'use strict'; let events = require('services/events'); module.exports = { create: function (data) { doCreate(data).then(user => { events.emit('user.create'); ...
I'm currently facing an issue where I need to compare a value within a JSON object with a variable. if (resp.userdetails.name == username) { // do something } The challenge arises when not all resp objects contain the userdetails property, resulting ...
I have a web application where I am utilizing jQuery to identify all the links present on the page and alter their destination so that I can smoothly transition to another section of the website using AJAX. However, I am encountering an issue with certai ...
Struggling to identify the issue at hand, I have turned to this platform in hopes of finding a solution. The setup involves an angularJS app with a GoLang/Gorilla mux server backend. The web app runs on http://localhost:8888/, while the server operates at ...
I have an AJAX request that updates the user information. I need to retrieve a specific value from the response and update the content of a specific element. For example, here is the element that needs to be changed: <div id="changeMe"><!-- New ...
Is it possible to utilize AngularJS to restrict a textarea to only accept numbers and return characters (/n/r)? I'm aiming for a format similar to the following: <textarea> 2344 5335 55555 2222 234 </textarea> The example above showcases ...
Seeking help as I am unsure how to tackle this task. My project involves using asp.net, where I have a div that has overflow:auto enabled to display terms and agreements. Additionally, there is an asp.net checkbox control with visibility set to "false". ...