I've been building a photography website here but i'm having an issue with the :hover transitions in the gallery pages. It loads two links that lay over the thumbnails, one opens the image in fancybox and the other sets the image as the background.
Everything works fine, but if you hover off of the thumbnail before the transition is finished, it animates back to its original state.
Is there a way to let the transition play out before reverting to its idle state?
Assuming JavaScript isn't out of the question, jQuery will certainly let you have this behaviour using the .hover() method's ability to accept two callbacks, one for the hover, one for when the hover stops.
$("div.thumb").hover(function(){
// show the magnifying glasses
$(this).animate({ top: "0", opacity: 1 });
}, function() {
// hide the magnifying glasses
$(this).animate({ top: "-100px", opacity: 0 });
});
Related
For my project I wrote a pure CSS hover menu. When the page loads the menu (#drop) waits for a few seconds before moving up, out of view. You can get the menu back by hovering over a different element (#hover) at the top of the page.
It works perfectly for me, but there is one issue. When you load the page, and you remain hovered over #hover, #drop moves up for a moment after it has finished waiting and moves back down in a glitchy manner.
You can experience it yourself here: https://jsfiddle.net/27mbnpwk/
Just run the script and put your cursor on the text, wait a couple of seconds and see it jump.
Is there a way to make the menu only go up if you're not hovering over #drop with pure CSS? Or, otherwise, with js?
I could not find a way with pure CSS, but there is an easy solution with jquery (thanks to #LinkinTED):
Two CSS classes, one for the menu being down, one for the menu being up:
.down{
transform: translate(0,00%);
}
.up{
transform: translate(0,-175%);
}
Then in javascript you create a function that initiates after the page is loaded. This function waits 3 seconds and subsequently adds the up class to the element, pushing it up, out of view. And a function that changes the class each time #hover is hovered over:
window.onload = function() {
setTimeout(
function(){
$('#drop').removeClass('down').addClass('up');},
3000);
};
$('#hover').hover(
function() {
// mouse in
$('#drop').removeClass('up').addClass('down');
},
function() {
// mouse out
$('#drop').removeClass('down').addClass('up');
}
);
Test it here:
https://jsfiddle.net/g9oq0124/1/
I would love to hear it if anyone does find a pure css, or cleaner way to do this!
I have a fixed button to roll the page to the beginning. When you put the mouse hover, it animates (and animate back when mouse is out). But if you hit the icon, the animation doesn't roll back. The arrow should translate 360ยบ back.
The structure is
<div id='back-to-top'>
</div>
The workin code with css is http://jsfiddle.net/7vrw4abx/
You are associating the style with :focus so on click of the item it will stay the same, until you click away. Change the following
.hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before {
to this
.hvr-icon-spin:hover:before, .hvr-icon-spin:active:before {
(Demo)
I have an image at the bottom of my page (or actually, window) and it is like a rising building.
However, sometimes it overlaps page and/or footer content.
This isn't a really big problem since I just added pointer-events: none;.
But I wanted to, when hovered over the image fade it out a bit so it's more obvious you can click through. But because pointer-events: none; it doesn't even register the hover action...
Is there any way I can make it click through, but actually catching the hover-trigger?
Thanks in advance!
JSFiddle
P.S. Just wondering, is there any way to actually detect hover on only the non-transparant parts of the PNG image?
Here's my go at it: http://jsfiddle.net/tZqQc/7/
I did the hover events on the <p> tag instead, but I think I got the same effect you wanted.
The key is the jQuery code:
$("p").mouseenter(function() {
$( "#theimg" ).fadeTo( "slow" , 0.2, function() {});
});
$("p").mouseleave(function() {
$( "#theimg" ).fadeTo( "slow" , 1.0, function() {});
});
and as for the transparent hover question, you technically can do it with imagemapping.. but that's a lot of work for this picture (it's probably not worth it)!
I'd like to show a modal dialog using a 3D flip effect, exactly like the "3D flip (horizontal)" example in the Effeckt.css library.
However I really don't need the whole Effeckt library, since I just want this one effect. So I've tried to strip out the relevant bits of the library into free-standing CSS and JavaScript.
This is my attempt, but it's not working: http://jsfiddle.net/eJsZx/
As the JSFiddle demonstrates, it's only showing the overlap - not the modal itself. This is odd, because the element inspector suggests that the modal should be visible - it has display: block, visibility: visible and zindex: 2000 (higher than the overlay element).
This is the JavaScript:
$('button').on('click', function() {
$("#effeckt-modal-wrap").show();
$("#effeckt-modal-wrap").addClass('md-effect-8');
$("#effeckt-modal-wrap").addClass("effeckt-show");
$('#effeckt-overlay').addClass("effeckt-show");
$(".effeckt-modal-close, .effeckt-overlay").on("click", function() {
$("#effeckt-modal-wrap").fadeOut();
$('#effeckt-modal-wrap').removeClass("effeckt-show");
$("#effeckt-modal-wrap").removeClass('md-effect-8');
$('#effeckt-overlay').removeClass("effeckt-show");
});
});
What am I doing wrong?
There were a couple of issues in the code.
First, your styles were missing the following:
.effeckt-show .effeckt-modal {
visibility: visible;
}
This was causing the modal to remain invisible.
Once the dialog was visible, the dialog would rotate in just fine, however when being dismissed it would not rotate out. This was due to the following line:
$("#effeckt-modal-wrap").removeClass('md-effect-8');
If you want to remove this class, it would need to be done after the animation is complete otherwise the 3d effect is lost. It doesn't necessarily need to be removed, but that depends on what the rest of your content needs.
The final issue was that the wrapper, on completion of the fadeout, was getting its local style set to display: none. Because of this, the second time showing the dialog would cause it to simply appear because it was moving from display: none to display: block. There are a couple of options here.
Use CSS to animate the fade in/out.
Use window.setTimeout after calling $.show on the element to give the dom a chance to update.
The final result: Working Fiddle
I have the following setup:
<div>Element with CSS3 animated height change</div>
<div>Link</div>
I animate the height change of the first element with CSS3 transitions, then I click on the link. In mobile Safari, the link gets highlighted with a semitransparent overlay, as expected. In Android browser (tested 2.1, 2.2, 2.3), the link is clickable, but the highlighting doesn't occur. I can actually usually click and hold on the link's old location and get the tap highlight there.
Demo here: http://jsfiddle.net/bnickel/DmMZN/
The defect appears to be that Android has a layer of "touch points" corresponding to known element positions, but does not update those points after a CSS3 animation. Is there any safe way to ensure touch points get update correctly? I am fine with performing a webkitAnimationEnd callback.
The solution is simple enough. You just need to trigger a DOM change event at the end of the animation. I'm using the following as it is generic enough not to impact other page elements.
function fixTouchLayer() {
$('<span/>')
.css({
position: 'absolute',
visibility: 'hidden'
})
.appendTo(document.body)
.remove();
}
http://jsfiddle.net/bnickel/DmMZN/5/