I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.
Related
I need to get the text inside these images.
The overview of the problem -> I basically need to have text inside each image.
Link to codepen --> https://codepen.io/martispyc/pen/KKmjWZj?editors=1100
Appreciated if the slider would slide these kinds of divs, not the images and text, but whatever works!
<div class="slider__images--container">
<img src="" alt="" class="slider__images--container-img">
<h3 class="slider__images--container-h3">Example</h3>
</div>
So, for everyone wondering, I solved it myself! I did put text inside and I am proud of it. The basic way I did it was as follows:
I added the same amount of text blocks as my slider has images. After that,
I coded some javascript so the nth text block as the nth image has the class .active
2.5 text had absolute positioning so I can move it around and `a z-index of >1
.active == opacity 1, .unactive == opacity 0.
And then I made it so every time it slides it checks which one has to be active (text block) and add the class and remove active from the last one.
Added a transition and boom!
(Basic rundown of how I did it, won't share the code only because of the thrill coding it up yourself!) byebye!
PS. I won't accept my answer just so if there's someone willing to put a real answer, go for it!
Situation
I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.
Take a look at the jSFiddle here:
https://fiddle.jshell.net/9n9ft9ks/3/
Problem
Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.
How I tried to fix it
The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work:
https://fiddle.jshell.net/9n9ft9ks/5/
So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:
document.getElementById('container');
to:
document.getElementsByClassName('container');
and
#container: {} to .container{}
But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/
Summary
I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/
You cannot use a single ID multiple times on the same page.
Use a class instead:
CSS:
.className {
/* attributes: values; */
}
HTML:
<div class="className"></div>
In your attempt, try changing the getElementByClassName for $('.container') and then replace the appendChild by append.
I made it work, but it was a bit messy, it would need more CSS to make the logos not overlap one over each others.
(You can add a style on the second div to see the multiple logos, ex: <div class="container" style="left: 50px;"></div>)
Here's the jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/
I have to do something like pexeso. When you hover element, it will flip front to back side (they have different texts) and when your mouse is out, it will fade from back to front side. This is example HTML, how it looks like:
<div class="pexeso">
<div class="pad">
<div class="front">1</div>
<div class="back">ONE</div>
</div>
etc...
There is some CSS, to look it well (it is in the jsFiddle source, attached bellow). Then Handling mouse enter and leave with jQuery:
$('.pexeso .pad').each(function() {
var el = $(this);
var back = el.find('.back');
el.on('mouseenter', function() {
back.removeAttr('style');
el.removeClass('before-fade').addClass('do-flip');
});
el.on('mouseleave', function() {
el.removeClass('do-flip').addClass('before-fade');
back.stop(true, true).fadeOut(250, function() {
el.removeClass('before-fade');
});
});
});
Here is full example in jsFiddle: DEMO
Try to hover any element from left or right side of your screen, it will works great. But now try to hover from top or bottom, it will do weird things to graphic and also, sometimes it stucks and remains invisible.
Probably know the problem: When you hover from top or bottom, it will start flipping, and when you are too slow, it also fires event mouseleave, because flipping is in progress and you are actually at empty space. Then it calls 1st function, then second, a lot of time and it got stuck. But I don't know how to fix it, can you help me?
Ok guys, don't try anymore, I already found a solution. Whoever is interested, how I fixed it, here is solution:
In CSS, make .back element always visible, so find this line &.do-flip { and add this style .back { display: block !important; }
In jQuery, there is no need to have back.removeAttr('style');, also this did mess with opacity style (fading effect)
Now wrap every "pad" with parent, for example .pad-container and give him exact sizes as .pads, now we will manipulate with him
Each function will take these wrappers, not "pads", so in jQuery $('.pexeso .pad-container').each(function() {...
Bind events mouseenter and mouseleave on this wrapper, but changing classes remain on "pads" and fadeOut effect on back element. Also, add function .show() to this back element before fadeOut.
That's all. Here is updated version: UPDATED DEMO
I have a very simple page, there are a few stacks of divs and each div has and image inside of it.
Each stack will fadeIn depending on the scroll position, the top stack has an object that overlaps the bottom stack and for some reason during the animation, the z-index changes.
here's the JSBIN, try clicking the fadeIn/fadeOut button and notice how the plate briefly went behind the bottom stack when it's transitioned.
http://jsbin.com/wefediti/1/
please help.
Since your jQuery.each() and therefore the fading animation will be processed synchronously, it is not possible with your approach to make them fade at the very same time.
I suggest you combine those images in the same div and fade them if it is possible for you:
DEMO
function fadePages(num) {
$(".page").animate({
opacity: num
}, 1000*(num+1));
}
do same at same time. It works.
It's a thing of positioning of your divs
I edited. All you need to do is stack your divs right and then re-edit your absolute position. But it works
EDITED CODE
Let me be more specific.
change the order of your divs liek so:
<div class="page1">
<img src="http://i.imgur.com/BleOC.jpg">
</div>
<div class="page">
<div class="bg"></div>
</div>
and that will fix you z-index problem. I made a different call for each div from the JS as well, But that was for testing purposes. I think you're fine with one call
I made the positioning edits as well HERE
But it seems like everyone is modifying it, so hurry up before someone else messes it up lol
I've read other questions and answers about this issue but they didn't work for me, maybe I am missing something or my example is slightly different, I don't know. Anyway, I have a div with some text and a link inside and I would like to create a new div when the user hovers over this first div. The problem is that, when I am over the first div, the second one fades in and out continuously, even if I don't leave the first div with the mouse.
Here is the HTML code:
<div id="content">
<h1>Portfolio</h1>
<div id="web">
<p>Web apps</p>
<a href="#">
First link
</a>
</div>
<div id="commentweb">
<p>The text that I want to show</p>
</div>
</div>
and this is the jQuery:
$(document).ready(function() {
$("#web").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
$("#commentweb").hide();
$("#web").hover(
function () {
$(this).children("a").children("img").attr("src","2.png");
$(this).css("background-color","#ecf5fb");
$(this).css( 'cursor', 'pointer' );
$(this).css('border','1px solid #378ac4');
$(this).children("p").css("opacity","1.0");
$('#commentweb').stop(true, true).fadeIn();
},
function () {
$(this).children("a").children("img").attr("src","1.png");
$(this).children("p").css("opacity","0.5");
$(this).css("background-color","#e8e3e3");
$(this).css('border','1px solid grey');
$('#commentweb').stop(true, true).fadeOut();
}
);
});
What should I do to have the fade in animation start when I am over #web and the fade out animation when I leave that div, without flickering (i.e. constant fadeIn and fadeOut)?
I have added a fiddle to show you the problem: http://jsfiddle.net/mMB3F/
It basically happens when I hover on the text.
This problem occurs because your comment div is inside the div that you are assigning the hover event. Note that the flickring occurs when you enter the mouse pointer in the highlighted area (red) showed in the image below (related to the comment div).
Take a look in this solution: http://jsfiddle.net/davidbuzatto/mMB3F/1/
The comment div has now a absolute positioning. When the mouse enters, the comment div will be showed next to the pointer. Off course, now you will need to change the code to fit your needs. Another way of doing this is to set an div container that encloses the #web div and to put another div next to it, seting them to float. Inside the new div you insert the div with the comment.
Update
My other answer was a little too grandiose, You just have to float your other div
#commentweb {float:left}
http://jsfiddle.net/mMB3F/5/
It needs to be asynchronous, the stop() is what causes it to blink, but you dont need a stop if you just wait for the fade to complete before you assign the event handlers.
http://jsfiddle.net/u7Q9P/1/
use jquery .mouseenter() and .mouseleave() to avoid that.
that way, you dont have to reposition anything in your css.
see my answer here for more detail