Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue?

Here is the code I am currently using:

http://jsfiddle.net/a8c9P/

The difference between my code and the example provided is that mine is within a different div for another JavaScript function that places it in the grid.

HTML:

<div class="brick">
<div class="overlay"></div>
<div class="overlayContent">
<img class="imgBig" src="img/Scan.jpg" />
</div>
<img class="imgSmall" src="img/Scan.jpg" height="345">

</div>
javascriptjqueryhtmlcssimage

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

Generating Unique Random Numbers with JavaScript

Is there a way to generate 5 unique random lottery numbers using JavaScript? I've been working on the code below, but can't seem to figure out how to ensure there are no duplicate numbers in the final selection. I tried adding conditionals and lo ...

javascriptrandomduplicatesnumbers

Learn about generating PDF files with React Native Expo using the react-native-html-to-pdf library!

I'm currently attempting to execute a 'Hello World' code utilizing the react-native-html-to-pdf library in order to generate a PDF, but I am encountering difficulties setting it up in Expo. Would you be able to provide assistance? I have tri ...

javascriptreact-nativepdfexpo

The basket_add function in basket.views did not generate an HttpResponse object, but instead returned a None value

Previously, I had success adding the price to my product. However, when I tried to add the quantity, something went wrong. Despite watching it over and over again, I couldn't figure out the issue. Any help would be greatly appreciated. This is the er ...

pythonjquerydjangoajax

Updating data scope in AngularJS using $http request not functioning properly

I am facing an issue where the $scope.user_free_status is not updating when I set a user free, but works perfectly fine when I unset the parameter. It's strange that I need to reload the page in one case and not the other. The data fetched is stored i ...

javascriptangularjsscopeionic-framework

Use Entity Objects instead of Strings in your Ajax requests for improved data handling

As I work on developing a web portal with Freemarker(FTL) as the front end technology, my project revolves around a single FTL page that utilizes a wizard to manage various user requests. The back end is structured using the Spring MVC pattern, where contr ...

javascriptjsonajaxspring-mvcfreemarker

What is the method for eliminating PHP $_SESSION using AJAX?

I am facing an issue with removing an array within a PHP Session variable using AJAX. Here is the process I follow: HTML: <a href="#" onclick="delete_pix(false, '1', false, '1.jpg');">remove</a> JavaScript: functio ...

javascriptphpjqueryajaxsession

If tall, then the height is set to 100%; if wide, then the width is set

My image-generating algorithm produces images of various sizes, some tall and some wide. How can I ensure that the images always fit perfectly within their parent container? They should be 100% height if they are tall and 100% width if they are wide. .im ...

htmlcss

Retrieving a Table Row from a TableView in Titanium Mobile

Does anyone know where the actual tableViewRows are stored within a TableView? When inspecting the TableView, I can see the headings for the Rows but not the Rows themselves. Can someone point me in the right direction to find where these Rows are contai ...

javascriptuser-interfacetitanium

Tips for Saving JSON Response from Fetch API into a JavaScript Object

I am facing an issue trying to store a Fetch API JSON as a JavaScript object in order to use it elsewhere. The console.log test is successful, however I am unable to access the data. The Following Works: It displays console entries with three to-do items: ...

javascriptjsonapifetch-api

The script fails to function properly when it is accessed from a different webpage

I have been working on a website using JQuery and JQuery Mobile. As I test the pages one by one, I created a page where users can input data and get autocomplete suggestions from a PHP/MySQL database. The functionality works perfectly as intended. However ...

jqueryjquery-mobile

deliver a promise with a function's value

I have created a function to convert a file to base64 for displaying the file. ConvertFileToAddress(event): string { let localAddress: any; const reader = new FileReader(); reader.readAsDataURL(event.target['files'][0]); reader ...

javascriptangulartypescript

Using a function with a parameter as an argument in an event handler

Imagine you have the code snippet below: $('#from').focus(listExpand(1)); $('#to').focus(listExpand(3)); I am facing an issue as the code is not behaving as expected. I believe the problem lies in passing a function result instead of ...

javascriptjquery

Manipulating visibility of an input tag using JQuery

Having a simple input tag: <input id="DAhour" type="number" style="width:50px; font-size: xx-small; visibility:hidden"> Initially, the input tag is set to be hidden. Upon changing a combobox to a specific index, it should become visible. Despite su ...

javascriptjqueryhtml

Looking for a JavaScript (Angular) event listener to trigger when closing pages and tabs

I am looking for an event that will only work when closing a page or tab, but should not be triggered when the page is refreshed. I am aware of the "beforeunload" event, but it also gets activated on page refresh. Below is the code snippet I am currently ...

javascriptangulartypescript

Exporting Typescript to Javascript files

I have created a sample TypeScript object with the following code: declare const S3 = "https://s3.amazonaws.com/xxx/icons"; declare const SVG = "svg-file-icons"; declare interface MyIcons { "image/jpeg": string; "image/jpg": string; } export const F ...

javascripttypescriptecmascript-6

Switching between all tabs simultaneously in an MDX page (React + Gatsby + MDX) using @reach/tabs

Creating a Tab component for a Gatsby site has proved to be a bit tricky. Imagine having a page with multiple tabs all labeled the same: Heading 1 First tab block Tab 1 | Tab 2 Content Tab 1 Second tab block Tab 1 | Tab 2 Content Tab 1 for the second bl ...

javascriptreactjsgatsby

"To ensure consistent alignment, position list items with varying heights at the bottom of the

Is there a way to align a series of li items to the bottom of their parent, the ul, without using any unconventional methods? The challenge lies in the fact that these li items need to have a float: left property and vary in height and width. Below is my ...

htmlcss

Implementing a function in jQuery to create a "Check All" and "Uncheck All" button

Can someone please guide me on how to implement a check all and uncheck all functionality when I check individual checkboxes one by one? Once all checkboxes are checked, the 'checkall' checkbox should automatically be checked. Below is the code s ...

javascriptjqueryhtml

Image element for Material UI CardMedia

There is a component in Material UI called CardMedia that allows for media content within a Card. The Mui website showcases an example using the img tag with CardMedia. https://mui.com/material-ui/react-card/#complex-interaction I am interested in using ...

htmlreactjsmaterial-uijsx

Tips for sending a MySQL parameter

Hey there, I need some help with the trigger setup I have: CREATE TRIGGER `update` AFTER UPDATE ON `table 1` FOR EACH ROW INSERT INTO table 2 ( Id, Revision, Purpose, Change ) VALUES ( OLD.Id, OLD.Revision, OLD.Purpose, @purpose_change /* user variable ...

javascriptc#mysqlajax