I've been trying to create an effect where I hover over an image and the entire image goes white with text but my code isn't working, would anyone mind talking a look at letting me know what i've been doing wrong? http://jsfiddle.net/MBsbj/
<div class="frontImages"><img class="alignnone size-full wp-image-24" alt="biryani sideimage" src="http://tandoorifreshonline.com.mlseo.net/wp-content/uploads/2013/11/biryani-sideimage.png"/>
<div class="hoverText">HOVER TEXT HERE</div>
</div>
$('.frontImages').mouseenter(function(){
$('.hoverText').fadeIn();
});
.hoverText {
display:none;
}
Note - this code was based off of this thread: Show text when the cursor hovers over an image - however when I entered the code from the answer, it doesn't seem to work either. http://jsfiddle.net/nMCbY/
Thanks!
Your code works as it is you should only add an reference to jQuery in your JSFiddle to make it work. See your updated fiddles: http://jsfiddle.net/MBsbj/1/ and http://jsfiddle.net/nMCbY/1/
I've also edited the second fiddle to position the caption over the image, instead of under by adding:
caption.offset({ top: image.position().top })
See: http://jsfiddle.net/nMCbY/3/
Related
I have a small issue with a series of non-bootstrap popover made by me that contains social buttons each one and have to be shown when hovering or clicking an element that contains the popover.
The html of one of the items is like this:
<li class="social__list-item js-show-popover">
<div class="media social__popover">
<div class="media-left">
<span class="popover__img"></span>
</div>
<div class="media-body">
<p class="popover__title">SÃguenos en Google+</p>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/104645458102703754878" data-rel="community"></div>
</div>
</div>
</li>
I am hiding .social__popover with opacity: 0; and visibility: hidden; and turn visible with jquery.
Everything works as expected, the problem is when you hover over the area where the iframe embedded buttons are when the popover is hidden and they make the popover to show.
Using display:none on the popover solves the issue, but it makes to break the rendering of some of those embedded buttons (mainly google buttons)
I prepared a Jsfiddle example: https://jsfiddle.net/victorRGS/dcv2g973/1/
It seems that we can live with it but I would like to work as expected, also the area of the facebook widget (not working in the example, idk why) is quite bigger and this one could be a real annoyance.
Any help will be welcome
If I am understanding your problem right, you should try this.
Adjust pointer-events:none; to the popover when they are hidden, and set back to auto when you hover the icon.
See example: https://jsfiddle.net/y6Ldjuwd/
Is this what you want?
I solved this adding the z-index property and worked fine, with no behavior problems in touch devices.
Updated example: https://jsfiddle.net/victorRGS/dcv2g973/2/
I want to add some text on image hover in my site's images; When mouse cursor goes on the image, Show some text about that image.
I want to add some description about that image.
But i want box be as is on this site:
http://libeskind.com/work/
Please see link, and tell me how can i do that pls?
I want that be as like as link example
Thanks all
It is an easy job check out my example , i just made a simple example i did not added transition's as i think it will help you in learning , try to understand the code it is really easy.
.imgc{width:100px;}
.imgc img{height:200px}
.imgc p {position:absolute;transition:1s all;padding:10px;background:#ddd;width:240px;display:none;margin-top:-20px}
.imgc:hover > p{display:block;}
<div class='imgc'>
<img src='http://libeskind.com/wp-content/uploads/aerial-view-c-guenter-schneider-555x426.jpg' />
<p>Hello World</p>
</div>
I'm really new to all of this so if anybody can help much appreciated - I have 2 questions.
First I tried:
<a href="Streaming.html">
<li>
<img Src="Streaming.jpg" onmouseover="this.src='HoverStreaming.jpg'; this.height='90px';"; onmouseout="this.src='Streaming.jpg'; this.height='75px';"; width="140" height="75">
</li>
</a>
This worked for changing the image but doesn't seem to work for the height.
Since it's in a list and div is block level I am not using it however I tried putting an ID on the image and using JQuery connecting my html to my other file using <script type="text/javascript" src="ArchDragonJQuery.js"></script> and using:
$(document).ready(function(){
$("#Bigger").mouseenter(function(){
$(this).animate({
height: "+=30px"
});
});
$("#Bigger").mouseleave(function(){
$(this).animate({
height: "-=30px"
});
});
});
I have tried a few things instead of ID and I still cannot seem to get it to do anything.
So I am wondering A- how can I make the size increase while hovering over, and B- is my jQuery code simply not being correctly linked to the html? if so how do I fix this?
Thanks
From what I can tell, you want an image to have a height of 75px and, when it is hovered over, you want the image to change and have a height of 90px. You can accomplish the 'growing' effect using only CSS using the hover selector.
.hoverGrow img {height:75px; transition:height .4s ease;}
.hoverGrow img:hover {height:90px;}
<a href="Streaming.html">
<li class="hoverGrow">
<img src="http://placekitten.com/g/200/300" onmouseover="this.src='http://placekitten.com/g/300/200';"; onmouseout="this.src='http://placekitten.com/g/200/300';">
</li>
</a>
this.height is always the height in pixels. It's a number without units. You'd want to do this.height=75. That'll change the height attribute on the element itself. (I think you could probably do this all without script and use CSS only, you can see an example here and here).
I'm not sure what's wrong with your jQuery case. Make sure the ID has the same capitalization - you have an unusual capitalization style going on in your example. IDs are case sensitive in most browsers. $("#Bigger") will match <img id="Bigger"> but not <img id="bigger">. You also can't have multiple elements with the same ID - make sure there is only one id="Bigger".
I redid your code and it all works out. Hopefully you can learn just by looking at what I did. Your a tag needs to be inside your li tag. Your Src needs to be src. keep the code clean. I know I am typing like shit but I am lazy now :D Click the link to the codepen
Hope this helps.
$('img.image').mouseenter(function(){
$(this).animate({height: '+=30'});
});
$('img.image').mouseleave(function(){
$(this).animate({height: "-=30"});
});
http://codepen.io/anon/pen/VYLezx
When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.
If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.
It's the same image. It just enlarges it slightly.
Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.
I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.
The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.
So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.
Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.
Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.
If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>