.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.
When using v-for to map out objects from an array into cards, it's important to keep the height consistent throughout the section. Manually adjusting text size with @media queries can be tedious and inelegant, requiring multiple rules for different sc ...
Currently in the process of developing a web application that integrates with the Google Analytics API, however encountering challenges when it comes to implementation. The user is given the option to choose their profile from three interconnected drop-do ...
I have created a calendar using PHP with previous and next buttons. I am now looking to implement AJAX functionality to navigate to the previous or next date without reloading the page. Within the PHP file called by AJAX, I have a query that retrieves tas ...
While I'm in the midst of some ajax operations, I thought it would be nice to display an overlay on my screen. I could create my own overlay div without any trouble, but considering that I am already utilizing Bootstrap, I might as well take advantage ...
I am working with a bootstrap modal that includes a form which requires data from the database. To retrieve this data, I am using PHP as shown below: public function get_view_for_inspection_report_belum_eor(){ $q = $this->inspection->get_view_fo ...
When trying to use HTML 5 canvas as a drawing board in my application, I encountered an issue. The drawings appear at an offset from the mouse pointer. My method involves using the Jquery .offset function to determine the event's position on the canv ...
Using the Pushy off-canvas menu from GitHub for my website has been great, but it's causing some trouble with my fixed header. When I scroll down the page, the header sticks perfectly to the top, but once I open the off-canvas menu, the header disappe ...
I have successfully implemented two JQuery functions for Gridview in ASP.Net 1. Enhancing Gridview Header and Enabling Auto Scrollbars <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script& ...
How can I align the table to the left without using float:left in the following code? Applying text-align: left to the parent element of the table doesn't seem to work as expected. http://jsfiddle.net/william/B4qJG/1 HTML: <div class="valueList" ...
I'm struggling to figure out how to create 9 responsive CSS circles in a row, with each circle containing an img tag rather than a background image. The goal is to center the img and resize it based on the size of its parent circle div. These 9 circle ...
For my project, I am working with two div boxes. My goal is to make it so that when I drag and drop box002 into another div box001, the background color of box001 should change to none. I have attempted to achieve this functionality using jQuery without s ...
Can anyone help me with my issue related to using Ajax to fadeIn a background color in beforeSend and fadeOut in success? I seem to have made some mistakes but can't figure out what went wrong. var data={ ...
I'm still getting the hang of tslint and typescript. The error I'm encountering has me stumped. Can someone guide me on resolving it? I've searched extensively but haven't been able to find a solution. Sharing my code snippet below. (n ...
Exploring the Material-UI Grid Component, I have found that it is built on flexbox and offers great functionality. However, my curiosity lies in comparing it to CSS Grid, which I find equally user-friendly. Despite my preference for CSS Grid, I am hesita ...
Imagine you have a basic form with an <input type="file"> tag. What I aim to achieve is, once the user selects a file (which is an image), I want to display that file on the same page for viewing - providing a better user experience. I attempted to ...
Is there a way to capture all the text inside a textarea or input field as a variable upon button click using jQuery or JavaScript? The .select() function doesn't seem to achieve this, instead displaying numerous CSS properties when logged. What app ...
I have a challenge with managing two different sizes of images (vertical and horizontal) that need to remain the same size. I am attempting to create a container that can hold the image without affecting the surrounding content, while also possibly using o ...
When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...
I'm trying to display a title over a video element while it's playing, but I've run into an issue. When using the <video> tag, it doesn't work as expected, however, when I switch it to a <div>, everything works perfectly fin ...
Trying to find a way to validate the content of this article, but I'm hitting a roadblock... <p style="text-align:justify;" class="custom-article"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt velit vitae risus t ...