How to create a thumbnail hover effect with CSS3 and javascript, overcoming the z-axis issue

Currently, I am working on creating a set of thumbnails that enlarge when hovered over. The initial setup achieves the zoom effect using CSS3 transform:scale and ease-in-out. However, the issue is that the enlarged images overlap each other due to sharing a single z-axis.

I need help in implementing a JavaScript solution to properly position each thumbnail along a z-axis that ensures each enlarged image appears on top of the others.

You can view a demonstration on my website here: demo Updated: Solved

Here is a snippet of the code:

html:

<div style="position: absolute;" class="item hover"> 
 <a href="#"><img alt="two" src="img/posts.png"></a> 
</div>

css:

#main div.hover {
position: relative;
z-index:200;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #297ab1;}

#main div.hover:hover, #main div.hover_effect {
-webkit-transform:scale(1.5, 1.5);
-moz-transform:scale(1.5, 1.5);
-o-transform:scale(1.5, 1.5);
-ms-transform:scale(1.5, 1.5);
transform:scale(1.5, 1.5);}

script:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

This page uses the above script to toggle the 'hover_effect' class, which increases the scale of the div to 150%.

Solution: z-index:999

Any suggestions for adding a delay to the initial mouseenter without using setTimeOut?

Any feedback or solutions would be greatly appreciated!

p.s. This demo utilizes a customized version of the masonry image gallery.

Thank you.

Answer №1

Not Yet Tested:

#main div.hover:hover, #main div.hover_effect {
    z-index: 999
}

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 video attribute in HTML is malfunctioning on the react webpage

Currently working on setting up a basic portfolio layout with a video playing in the background on loop. However, despite making some adjustments and modifications, the video is not showing up as expected. Any insights or suggestions on what might be causi ...

Using Javascript to make an AJAX request and appending "?=####" to the end of the call

When I make an ajax call to a URL on my server, the response from my logs shows as "/action?_=1423024004825". Is there a way to remove this extra information? $.ajax({ type: "GET", url: "/action" }); ...

Oops! Looks like node.js is throwing an error with the message "connect ECONNREFUSED"

After creating a node.js application that interacts with a locally installed MySQL database, I encountered an issue where running the app through CMD (npm start) returned the desired results, but testing it through Postman resulted in an error: connect E ...

Tips for sending routeparams value to model window in AngularJS

In the current project, I am working on implementing a modal window for the edit screen functionality. The process involves displaying a list of items on the screen, from which users can select one row and then click on the modify button to open the edit s ...

Updating the innerHTML of a frameset

I have a unique challenge that involves loading the frameset of www.example.com/2.html when accessing www.example.com/en/test/page.html. Successfully accomplished this task. Now, after loading 2.html in the frameset, I want to modify ".html" to ".html" t ...

"Unleashing the Power of AngularJS: Implementing a Global Error Handler to Display and

When building my website, I have multiple Angular apps that require a global error handler to track and display alerts for errors with codes like 500 and 401. Here is what I have so far: In order to create a global error handler module, I've set up t ...

Backend data not displaying on HTML page

I am currently working on an Angular 8 application where I have a service dedicated to fetching courses from an API endpoint. The service method that I'm using looks like this: loadCourseById(courseId: number) { return this.http.get<Cours ...

Manage text, PDF, and image files in a MEAN stack app by uploading and fetching them from a MongoDB database using

I have been working on developing a piece of code that allows users to create a dynamic URL, upload a file by clicking a button on the page, and then download the same file in the same format when revisiting the URL. The functionality is similar to cl1p, b ...

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue. Here is the layout of the page: <nav> navbar </nav> <div> car ...

How can we delete a specific word from a string if it is found in an

Facing a seemingly simple problem that's proving tricky to solve. I have an array of product names and a sentence. The goal is to remove any product names from the sentence if they appear in it. const products = ["premium t-shirt", "t-shirt", "swea ...

Exploring the importance of defining a JSONP callback function

I am relatively new to JavaScript and struggling with an issue in my code. My code includes an Ajax request to a server, and I receive a response from it. Due to the cross-domain nature of the request, I am utilizing JSONP. $.ajax({ url: "***", c ...

What is the process for creating a Sass mixin that declares a selector at the base level, rather than nested within another

Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...

Execute script when on a specific webpage AND navigating away from another specific webpage

I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...

Content located on the right-hand side of the menu

I am currently working on a vertical navigation menu design, but I am facing some issues with aligning the text to start from the very left edge of the element. HTML <div class="jobs-links"> <ul> <li><a href="renovations. ...

Using Angular 6's httpClient to securely post data with credentials

I am currently working with a piece of code that is responsible for posting data in order to create a new data record. This code resides within a service: Take a look at the snippet below: import { Injectable } from '@angular/core'; import { H ...

What is the method for retrieving the active element with Waypoint?

Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...

Retrieve data from a list using an API

I am currently working on creating a dynamic list by fetching data from an API. The goal is to display detailed information in a modal when a user clicks on a specific item in the list. While the list itself is functioning properly, I am encountering an i ...

Interactive tooltip with hyperlinks powered by jQuery

Is it possible to create a pop-up window with links that behave like a normal tooltip but can be clicked on by the mouse? How can this functionality be achieved without losing focus when hovering over the links causing the window to close? jQuery(docume ...

What is the best way to position a logo and navbar in alignment?

I'm still learning the ropes here. I'm having trouble getting the navbar to align with the logo because margin-top/bottom doesn't seem to be working for some reason. <HTML> <HEAD> <link href="style.css" rel="stylesheet"&g ...

Is there a way to incorporate a callback function for animation in cgscenegraph?

After creating my animation, I am interested in incorporating a callback function when the loop of the animation comes to an end. Is there a way you can guide me on achieving this? Thank you. ...