<body>
<div id="content" >
<img id="Image1" src = "img.png" />
</div>
</body>
I am looking to implement a functionality where a close image appears on the top right corner when hovering over another image, specifically Image1. Can this be achieved using CSS and jQuery? Any suggestions on how to accomplish this?
To implement the close image functionality, first create the close image and then style the #content div with a hover effect as shown below:
<div id="content" >
<img id="Image1" src = "img.png" />
<img id="close" src="/path/to/close/image/close.png" />
</div>
#content{
position:relative;
z-index:0;
}
.close{
position:absolute;
right:-10px; top:-10px; /* This places the close image in the top right corner of the content */
display:none;
z-index:1;
}
#content:hover .close{
display:block;
}
If you want to achieve this using JQuery, you can use the following script:
$(document).ready(function(){
$('#content').hover(function(){
$(this).children('.close').show();
}, function(){
$(this).children('.close').hide();
});
});
Raise the z-index of the close image above that of the image being hovered over, position the close image absolutely, and then place it in the correct position with an opacity of 0. Finally, utilize jQuery to animate the opacity on hover.
Start by creating a sample design that includes your close image in the top right corner. Once you have this ready, utilize jquery to display it when hovering over:
$('#Image1').on('mouseenter', function() { $('#closeImg').show(); });
You can position the close image like this:
<div class="img-container">
<div class="close-img"><img src="..." /></div>
<img src="..." />
</div>
CSS:
.img-container { position: relative; }
.close-img { position: absolute; top: 0; right: 0; z-index: 99; }
--- Update: If you desire some special effects, follow the jquery method above. Alternatively, you can use the pure CSS approach (
.img-container:hover .close-img { display: block }You have the option to achieve this using only CSS, although it may not be compatible with IE7 or older versions.
<body>
<div id="content">
<img id="Image1" src="img.png" />
<img class="close" src="close.png" />
</div>
</body>
CSS Approach:
#content { position: relative; }
#content .close {
display: none;
position: absolute;
top: 0;
right: 0;
}
#content:hover .close { display: block; }
UPDATED
If you want a fade in/out effect for the close button, jQuery is necessary:
$("#content").hover(function() {
$(".close", $(this)).stop(true).fadeIn();
},
function() {
$(".close", $(this)).stop(true).fadeOut();
]);
I have been experimenting with the following code: <head> <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> <script type="text/javascript"> function loadVideo(playerUrl, ...
I'm facing an issue with two JQuery sliders on my page. The local version works fine, but when I upload it to my web host, only one slider functions correctly. I need both of them to work as intended. Any insights on how to resolve this problem? See ...
My JavaScript code is as follows: var person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; var myData = JSON.stringify(person); $.ajax({ type: "POST", url: "test.php", dataType : "text", ...
Is it possible to create a custom-shaped image container without using <div />? I encounter an issue when trying to add corners on top of the #content-box as shown in this screenshot: . The corner images only cover half of the block element, with th ...
I am currently working on a project for a friend, where I have implemented a hidden text field. When the user starts typing in this field, the text is displayed in a div element to create an effect of typing directly onto the screen instead of an input fie ...
Struggling to get my menu and footer links aligned all the way to the right of the page. Here's what it currently looks like http://prntscr.com/32snbr, and this is the desired alignment http://prntscr.com/32snrm I've shared the HTML code below, ...
My website layout is relatively straightforward. It consists of a header at the top, a navigation bar with an image inside a column on the left, and the main content displayed on the right side. https://i.stack.imgur.com/yYzaG.png For mobile responsive vi ...
In our current project, we are utilizing Angular and making API calls with Restangular. Recently, I encountered an error while trying to do a POST request to a specific endpoint. The POST call looked like this: Restangular.one('aaa').post(&apos ...
In my React application using css-modules, I encountered an issue when trying to import CSS files from external libraries. Due to the inability to globally wrap them in a :global block, webpack interprets them as styles intended for objects only. Is there ...
I am trying to insert text at the end of the header in a jumbotron template: <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text ...
Here is a question that needs solving: I have two elements that need to be displayed in one row at a specific ratio, with the same pattern repeating in subsequent rows. However, the content of the next row is appearing in the unused space of the previous r ...
I've encountered an issue with the code on my admin page. It used to work perfectly fine on my system, but now it seems to have stopped functioning. My client urgently needs to update this page, however, when I attempt to run it, the JQuery requests a ...
Looking to conceal a textbox control using javascript or jquery. I attempted the following code: document.getElementsByName('Custom_Field_Custom1').style.display="none"; Unfortunately, I received an error in the java console: document.getEle ...
I've been struggling with this issue for a while now. I need to move the pagination outside of the slider, but using padding or margin doesn't seem to work. It always remains inside the slider, and if I try to position it outside, it gets hidden. ...
Initially, I attempted using regular HTML for the dropdown button but encountered issues. As a result, I switched to jsfiddle to troubleshoot. Despite my efforts, the dropdown feature still refused to work. If you'd like to take a closer look, here&a ...
I have attempted to move the last element in my list to the first position upon clicking, but unfortunately, it is not working as expected. I followed the advice provided in response to a question on the following page: Move last child to first position. W ...
I am trying to position text vertically at 270 degrees and in the middle of an image. This is my goal. Despite attempting to use the CSS 'transform' property, I have been unsuccessful. You can view the code I tried here. Below is the HTML and CS ...
My code seems to be working only once. This is the HTML code snippet I am using: <span id="0" class="add-title">add title</span> And here is my JavaScript code: jQuery(document).ready(function($) { var iTitlesArray = []; $(document ...
Yesterday, with the assistance provided here, I discovered how to load AJAX'ed content and maintain the page structure. However, I encountered an issue where the script tags were not loading. Upon further investigation, it appears that when using a se ...
I am looking to create the following HTML structure: <div id="my-grid" class="isotope"> <div class="myProject-item">....</div> <div class="myProject-item">....</div> <div class="myProject-item">....</div> ...