Display the full image size when the mouse is hovered over

I currently have two links for a single image. One link is a thumbnail displayed on the screen, while the other link leads to the full-size version of the same image.

Is there a way I can implement a code that will darken the screen and display only the full-screen image when the user hovers over the image?

<div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>
<div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg"><img scr="/thumbnail2.jpg"> </a></div>

When the mouse hovers over the image:

  1. Fade the screen to black
  2. Display Fullsizeimage.jpg in the center of the screen
javascriptjquerycssajaxhtml

Answer №1

One unique approach you can take is to create a hidden div element positioned above all other elements with 100% width and height using position:absolute and z-index. When ready to display an image, make this div visible and load the full-size image into it, creating a black screen effect by setting its background color to black.

To implement this, update your HTML to include a reference from the small image to the large one:

<div id= "smallImage" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>

For loading the large image, use jQuery like so:

$("#smallImage").on('mouseover',function(){
  var smallImage = $(this);
  var largeReference = smallImage.attr('rel');
  $("#largeImage").attr('src',largeReference);
});

The corresponding HTML for the large image would be:

<img id="largeImage" src="" />

Remember to provide a way for users to close the large image view.

Answer №2

Try this CSS code to show a black box when hovering over an image

#1 Img:hover +div  {
position:fixed;
top:0px;
left:0px;
width:"set the width";
height :"set the height";
}

Answer №3

function enlargeImage1() {
img = document.getElementById('img1')
img.src = "/fullsizeimage.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
 function enlargeImage2() {
img = document.getElementById('img2')
img.src = "/fullsizeimage2.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
    <div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg" onmouseover="enlargeImage1()"><img id="img1" scr="/thumbnail.jpg"> </a></div>
    <div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg" onmouseover="enlargeImage2()"><img id="img2" scr="/thumbnail2.jpg"> </a></div>

Remember to include the close link as recommended in one of the solutions

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

Using Node JS, how to pass a variable length array to a function?

Is there a way to dynamically call an addon function with varying argument lengths? I capture user input in a variable like this: Uinput = [5,3,2]; Now, I want to pass these numbers as arguments to my addon function like this: addon.myaddon(5,3,2); I n ...

javascriptnode.jsvariables

The failure within the internal request resulted in the failure of the main request

I develop a Jquery Promise with the following structure: request1() .then(response => {}) .then( () => { request2().done(response => {}) } .fail(err => {}); In the done and fail blocks, I implement code to "unblock" the scre ...

javascriptjquerypromisejquery-deferred

Eliminating the Scrollbar from Bootstrap 4 DataTable Causes Table Width to Decrease

My tables are causing a horizontal scroll bar to appear when converted to Bootstrap data tables. Adding the "p-3" class to the table's div for padding eliminates the scroll bar but also narrows the table. Is there a solution to removing the scroll b ...

htmlcssbootstrap-4datatablesspacing

Enhancing React components with ellipsis and tooltips for text longer than two lines

Can a React component be developed to automatically add an ellipsis after two lines and display a tooltip only when the text is wrapped? I attempted to customize the Material UI's Typography component with the "noWrap" property and additional CSS, bu ...

cssreactjsmaterial-uijss

How to prevent default action while submitting a form using jQuery validation and AJAX?

Hello, I am currently working on implementing an AJAX submit form with jQuery Validate. The issue I am facing involves the e.preventDefault(); statement and how to properly implement it in this scenario. The main problem is that the form is being submitt ...

javascriptphpjqueryhtmlajax

What is the best method for incorporating a YouTube embedded video into an image carousel using HTML and CSS?

I'm encountering an issue with my product carousel that includes an image and a video. The image displays correctly, but when I attempt to click on the video to have it appear in the main carousel view, it doesn't function as expected. Here is a ...

javascripthtmlcsscarousel

Guide to implementing CSS3 transitions with prefixes using JavaScript

Is there a way to apply CSS styles using JavaScript when I don't have access to the CSS file? #fade div { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; -ms-transition: opacity 1s; transition: ...

javascriptcss

JavaScript did not apply the style as expected. However, the console displays the information

Utilizing jQuery to add a specific style $("#notifPrefWA").attr('style', "border-radius: 5px; border:#FF0000 5px solid; padding: 10px;"); The style change is visible in the source and console when Chrome inspected... but the ...

javascriptcssbootstrap-4styles

The declaration file for the 'react' module could not be located

I was exploring Microsoft's guide on TypeScript combined with React and Redux. After executing the command: npm install -S redux react-redux @types/react-redux I encountered an error when running npm run start: Type error: Could not find a decla ...

javascriptreactjstypescriptredux

Is it possible to pass multiple functions to the parent component in ReactJs if using OnChange() as a prop?

Just getting started with React and trying to pass data from a child component to a parent component. <div className="filter-module"> <i className="fas fa-sign-in-alt icon"></i> < ...

javascriptreactjsreact-propsreact-component

Having trouble locating the Xpath for the download link, it appears to be listed as a list item (li). I've attempted using the Contains function without success. Any assistance would be

Seeking the Xpath for the image below. The Download File link is on the right and the element DOM is on the left. enter image description here I attempted to find the Xpath by directly copying it and also using Contains text "Download File", but my scrip ...

htmlselenium-webdriverxpathrelative-locators

What methods can be used to transfer data from mapped objects to their parent component in React?

I'm in the midst of creating a cutting-edge shopping cart application. Each item is beautifully displayed as a card component within the app. To achieve this, I've utilized mapping with dummy object data: const Home = () => { const dumm ...

javascriptreactjsreact-hooks

Upon submission of the form, utilize an AJAX call to display an additional form

I am looking to create a search form that, upon submission, triggers an AJAX call to render another form with an email text field and submit button. The initial form is part of a custom action in rails_admin and I also want to pass the search parameters t ...

jqueryajaxformsruby-on-rails-4rails-admin

Zend Framework causing issues with Jquery Ajax - encountering parsererror with Json output

I'm new to using the zend framework and am struggling to pass an array from a controller to a jQuery AJAX function in the view. I keep receiving errors when I change the 'dataType' to 'json'. Can someone please help me understand ...

phpjqueryajaxjsonzend-framework

Use Google script to input drop down options directly into a Google spreadsheet

After gathering coding advice from various StackOverflow examples, I've hit a roadblock while attempting to take my script to the next level. The task seems simple enough, but for some reason, I just can't figure it out. Here's the situati ...

javascriptjqueryhtmlgoogle-apps-script

Using *ngIf to construct SVG icons in Angular 2 doesn't contribute to the DOM in any way

I am currently utilizing icoMoon to import a series of SVG icons. The structure of the html I'm trying to create using ngIf is as follows: <div class="contactIcon"> <svg class="icon icon-envelop"> <use xlink:href="symbol-d ...

javascriptsvgangularangular-ng-if

Click to reveal additional images once the "show more" button is pressed

Hey there! I'm currently working on implementing a feature where, upon clicking "show more", 3 images will be displayed. And if the user clicks again, another set of 3 images will appear, and so on. I seem to be facing some difficulties with the JavaS ...

javascriptjqueryhtmlcss

Issues with JQuery draggable functionality not functioning as expected

Is there a way to drag bookmarks on a line and have the text above them change to show the percentage from the right edge? Here is a quick snippet that achieves this, along with a demonstration in this fiddle. Check out the code below: HTML <div id=& ...

jqueryhtmlcssdraggable

Typescript selection missing in Intellij IDEA when creating new Step definition File for Protractor and Cucumber

Currently working on: Protractor Cucumber and Typescript project Preferred IDE: Intellij IDEA Ultimate edition Any suggestions on what I might be overlooking? List of added plugins: 1. Javascript Support 2. Node.js ...

javascripttypescriptintellij-ideaprotractorcucumber

How can I store items in a JavaScript array so that they are accessible on a different page?

I'm running into an issue with my PHP website. Each item has a "request a quote" button that, when clicked, is supposed to add the item name to an array using JavaScript. This array should then be added to the "message" field on the contact.php form. ...

phpjavascriptarrays