Thumbnail hover zoom (enlarge) w/CSS3 and javascript z-axis problem - javascript

Im attempting to build a series of thumbnails that enlarge on hover. My preliminary build accomplishes the enlarge/zoom part by using CSS3 transform:scale and ease-in-out. The problem is that they overlap each other because they share a single z-axis.
Can anyone assist me in creating a javascript addition to this scenario that correctly positions each thumbnail in a z-axis that makes sense, i.e. each enlarged image resizes to be on top of each other image.
Demonstration on my website here: demo Updated: Solved
Preview of code:
html:
<div style="position: absolute;" class="item hover">
<img alt="two" src="img/posts.png">
</div>
css:
#main div.hover {
position: relative;
z-index:200;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #297ab1;}
#main div.hover:hover, #main div.hover_effect {
-webkit-transform:scale(1.5, 1.5);
-moz-transform:scale(1.5, 1.5);
-o-transform:scale(1.5, 1.5);
-ms-transform:scale(1.5, 1.5);
transform:scale(1.5, 1.5);}
script:
$(document).ready(function() {
$('.hover').bind('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
So this page uses this script to toggle the hover_effect class that increases the div's scale to 150%.
Solution: z-index:999
Also any ideas about putting a delay in the initial mouseenter without a setTimeOut?
Any suggestions and solutions are most appreciated!
p.s. This demo uses a modified version of masonry image gallery.
Thanks.

Untested:
#main div.hover:hover, #main div.hover_effect {
z-index: 999
}

Related

Transitions in fancyBox 3

Is it possible to specify which transition to use in fancyBox 3? There are 3 transitions I'm interested in:
Open slide/gallery
Navigate between slides
Close slide/gallery
By default, fancyBox 3 uses different transitions for different types of content.
<!--This will zoom in-->
<a data-fancybox href="#html-content">Open</a> <!--This will fade in-->
<div id="html-content" style="display: none;">
<p>This content does just fades in.</p>
</div>
Look at this codePen to see it in action, including the navigation transitions. For images we have:
Zoom in
Slide horizontally
Zoom out
For html content we have:
Fade in
Slide horizontally
Fade out
Is it possible to change this default behavior in fancyBox 3? For example to let also images fade in and out? I was not able to find any information on this in the documentation.
As of fancyBox version 3.1.20, this is possible through the options animationEffect and transitionEffect. You can find the documentation here.
Not sure if I'm getting this right... but if you want to fade in & out the images (between each transition) you can trick them by using a bit of CSS, add this to your jquery.fancybox.css:
.fancybox-slide.fancybox-slide--image {
opacity: 0;
-moz-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
transition: all 0.01s ease;}
.fancybox-slide.fancybox-slide--image.fancybox-slide--complete {
opacity: 1!important;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;}
And also modify the speed of the jquery.fancybox.js lib to:
// Animation duration in ms
speed : 100
Disclaimer: I'm just a mortal and this is not the neatest solution, but worked for me (:

How to improve this animation?

I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.

How to make a custom context menu in an Angular App?

I've been working on a custom context menu for a table on one of my views in an angular app. The idea is to display a hidden, absolutely-position div on right click of any particular row in this table.
I think the event is returning the correct clientX and clientY, but where I'm running into trouble is when I try to position this hidden div to the coordinates of the right-click event. What I'm using, right now, is this:
$('.toggled-options-status-change').css({
top: event.clientX,
left: event.clientY
}).show();
where .toggled-options-status-change is the class name of the hidden div.
What's basically happening is that the div is being position is seeming random spots, so it can't simply be fixed by decremented the top and left positions be constant values.
It's hard for me to tell what's going on, and I wish I could share a fiddle or something with you guys. What I'm hoping is that someone has come across an issue like this before and knows a direction to go and investigate further.
Edit - CSS
.toggled-options-status-change {
position: absolute;
display: none;
}
.off-canvas-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
overflow: hidden;
.inner-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
Edit - HTML
relevant html outline:
<html>
<body>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div ng-view>
...
</div>
</div>
</div>
</body>
</html>
Almost always with these sorts of things, for me at least, the answer is exceedingly simple and makes me look like a fool for missing it the first time around. Oh well, it's nice to figure it out regardless.
top should be clientY, not clientX, and vice versa. omg

Animating CSS by transitions when a class is added to an element

I'm using the Foundation framework on a project & it's Top Bar feature for navigation allows for drop-down navigation to appear on hover.
During the hover event it adds a .hover class to the relevant element, therefore the changes in CSS pop into sight rather than animating by way of a smooth transition.
This got me thinking. Is it possible to animate (via transitions or similar) the changes in CSS definitions?
Take this example. Here is our default element:
<div class="a-box">Some content</div>
And it's default CSS:
.a-box {
width: 200px;
height: 200px;
background: red;
}
On hover the framework (which I do not wish to edit the core file to keep it clean for updates) adds the hover class. Making our element now look like this:
<div class="a-box hover">Some content</div>
Here could be some CSS for the hovered element:
.a-box.hover {
width: 400px;
// I thought perhaps adding the following would work but it doesn't appear to
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
I'd be keen to hear others POV on this! I'm not sure if this is a duplicate, but all the posts I've read relate to some form of jQuery animation.
You aren't far off the mark, here is a working example.
The main error in your example is that you have
<div class="my-box hover">Some content</div>
But your CSS is looking for a-box not my-box.
As a habit, I normally define the animation on the simplest (most general) selector for the element and then any additional selectors will benefit from it.
.my-box {
width: 200px;
height: 200px;
background: red;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
.my-box.hover {
width: 400px;
}

firefox CSS transition bug

I wrote some CSS to cause a sidebar to do a slide transition from off the page to visible when you mouse over the side of the page. The CSS is simple and involves adding/removing a class that controls the left: position of the sidebar.
#sidebarInner{
height:100%;
width:50px;
background-color:blue;
position: fixed;
-moz-transition: left .2s linear;
-webkit-transition: left .2s linear;
-o-transition: left .2s linear;
transition: left .2s linear;
z-index:2;
}
.slideLeft {
left: -100px;
}
Try the following demo on a webkit browser and on Firefox:
http://jsfiddle.net/MmFnY/7/
You'll notice on webkit, the blue colored div has the 0.2s slide left transition but on Firefox it does not. Does anyone know whats wrong with the CSS above?
In order for the transition to work you need to provide it with a default left value. Easiest way to do this is probably to give it another class for when it's inside such as:
.slideRight{
left: 0px;
}
http://jsfiddle.net/MmFnY/19/

Categories

Resources