.vpbutton {padding:4px;background-color:#EFEFEF;}
.userbox img{padding:8px;background-color:#EFEFEF;}
.userbox img:hover{opacity:.2;}
<div class="userbox">
<img src='img.png' style='height:120px;width:120px;border:1px solid #e5e5e5;'>
</div>
<div class="hello"> Hello</div>
I am attempting to achieve the placement of the div with class="hello" centered on top of the image when it is hovered over. Any suggestions or tips are greatly appreciated. Thank you!
As others were providing their answers, I decided to create my own JSFiddle without using any JavaScript code. Take a look at my JSFiddle here.
If I've got it right... you're looking to have a div show up on top of your image when it's hovered over, is that correct?
When it comes to displaying/hiding it, there are two methods that come to mind. One utilizing css, and the other involving jQuery.
CSS:
<a href="#" class="Anchor">
<img src='img.png' class="img">
<span class="Hello">hello</span>
</a>
a.anchor span.Hello {visibility:hidden;}
a.anchor:hover span.Hello {visibility:visible;}
You can also apply some positioning (.Anchor set as relative, .Hello as absolute, with appropriate z-index).
jQuery:
$(document).ready(function() {
$('.img').mouseover(function(){
$('span.Hello').show();
});
});
If the centering aspect is still unclear, feel free to ask for further clarification :)
http://example.com/code-sample
If you're curious about centering or :hover effects, here's a CSS solution to achieve it.
Presenting the solution:
Another option is to achieve this using CSS with percentage values.
Exploring mouseover and mouseout effects:
Check out this example on jsFiddle
<div class="userbox">
<img src='img.png'>
<div class="hello" style="display:none"> Hello</div>
</div>
$('.userbox img').mouseover(function() {
$(".hello").show();
});
$('.userbox img').mouseout(function() {
$(".hello").hide();
});
.vpbutton {padding:4px;background-color:#EFEFEF;}
.userbox {position:relative;} .userbox img{height:120px;width:120px;border:1px solid
#e5e5e5;padding:8px;background-color:#EFEFEF; } .userbox img:hover{opacity:.2;}
.hello { position:absolute; top:10px; left:10px; }
This is my best attempt at creating a single line of text within some restrictions. It may be possible to customize this further by adding a div inside that takes up 80% of the image width and centering it for paragraph text.
Check out the JSBin example below for reference:
CSS
.vpbutton {
padding:4px;
background-color:#EFEFEF;
}
.userbox img{
padding:8px;
background-color:#EFEFEF;
border:1px solid #e5e5e5;
}
.userbox img:hover{
opacity:.2;
}
.hover-text {
display:none;
position:absolute;
}
.userbox img:hover ~ .hover-text {
border:1px solid #000;
top:0;
left:0;
display: block;
text-align:center;
}
JS
$(function() {
$('img[rel="hover-text"]').each(function () {
this$ = $(this)
console.log((this$.outerWidth() - this$.innerWidth()))
this$.parent().find('.hover-text').css({
'margin': (this$.outerWidth(true) - this$.width())+'px',
'top':0,
'left':0,
'height': (this$.height())+'px',
'width': (this$.width())+'px',
'line-height':(this$.height())+'px'
})
})
})()
HTML
<div class="userbox">
<img src='http://www.clonescriptsdb.com/scriptimages/inout-search-engine-google-like-search-engine-788.jpg' rel="hover-text">
<div class="hover-text">asd</div>
</div>
http://jsbin.com/azuyol/13/edit
UPDATE to correctly consider margins, padding, and borders.
In the process of developing a gallery feature that displays a full image in a tooltip when hovering over thumbnails, I encountered an issue where the full images extended beyond the viewfinder. To address this, I decided to adjust the tooltip position bas ...
As a beginner, I'm looking to create a structure resembling a thigh, leg, and ankle using thick lines. My aim is to rotate them with animation, ensuring that the joints between the lines mimic those of a knee joint and hip joint. Below is the code sn ...
I am having trouble aligning my form vertically. I've experimented with different methods such as using display: table-cell and vertical-align: middle property, but nothing seems to work. I want to maintain the current structure of the page and would ...
Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below: <div><!-- ancestor --> <!-- Any number of descendant levels before reaching the target div --> < ...
I am facing an issue where the button I need to click on my website has a changing ID suffix every time I visit the site. To tackle this problem, I have saved the suffix in a variable and attempted to combine it with the prefix so that I can click the butt ...
Is there a way to make the highlight span sit just after the to without affecting the width of the parent, and without using absolute positioning? I would like the span to be aligned with the example "to" and overflow outside of the parent container. Thank ...
I have set up the PayPal payment form on my website. <form name="form1" method="https://www.sandbox.paypal.com/cgi-bin/webscr"> <!-- Rest of input --> <!-- Button that triggers redirection to PayPal payment --> <input type="submit" ...
Today, I decided to make some alterations on the header.php file of my WordPress website in order to tweak the flag icons displayed at the top of the page. However, when I refreshed the page, everything looked completely chaotic. Even after undoing all th ...
I've been encountering some trouble with 'event bubbling' so I decided to use the '.on' event to address this issue. However, now when I attempt to submit the form, it doesn't seem to work until I click the submit button twice ...
Similar Question: jQuery ajax() vs get()/post() Can someone help me understand the variances between jQuery ajax() and jQuery get()? Furthermore, which method would be more appropriate for loading data from a URL into a div after a user clicks on a l ...
This is some HTML Code I'm working with <a href="test.html"> <div class=" menubox mcolor1"> <h3>go to test page</h3> </div> </a> Here's the corresponding CSS: .menubox { height: 150px; width: 100%; ...
I created an HTML file but the CSS properties are not displaying correctly in the browser. I'm not sure where I made a mistake. Instead of using a separate CSS file, I have included it directly in the HTML file. <!DOCTYPE html> <html> &l ...
When using my editor, I am able to paste a video URL which is then converted by regex into an embed code. The URL in the WYSIWYG-editor looks like this: Once converted, the output HTML appears as: <p>http://emedia.is.ed.ac.uk:8080/JW/wsconfig.xml& ...
I am encountering an issue with a column of elements stacked below each other in my code. Here is a simplified version of my implementation: <div style="position: relative; height: 100%;"> <div style="position: absolute;">Really long text h ...
I have 3 different tabs named Monthly, Bi-monthly, and Weekly. The user can set one of these as their default payroll period, causing that tab to become active. I was able to achieve this functionality by utilizing the following code within the <script& ...
Take a look at this HTML : <div class="container"> <a id="1"></a> <a id="2"></a> <a id="3"></a> <a id="4"></a> <a id="5" class="specific"></a> <a id="6"></a ...
Currently, I am facing some issues with my code while trying to trigger on submit event on a form and validate it. The main problems I encountered are that the onsubmit event is not being triggered, and the input field of type email is not validated proper ...
I am struggling to load custom fonts from a local directory. Can someone provide assistance? Below is the code I am currently using: @font-face { font-family: 'My Custom Font'; src: url('./fonts/MyCustomFont.eot'); src: url(&apo ...
Currently, I have a Boolean variable stored in a hidden input field. When the user is signed in, it's set to false; otherwise, it's set to true. I have download buttons that should link to a file for download. My goal is to hide these buttons an ...
With my Node.js app using Express, I've set up a route for handling POST requests to create database objects. app.post('/', function(req, res) { // Create object in DB res.send(''); res.status(201).end(); }); I know t ...