Develop Reference

How to display notification popup with animation appearing and decreasing from right top to bottom and closing from bottom to top

Currently, my notification popup work but I would like to do this animation without JS/JQuery (only animation). Also there is an issue with clicking. When you click outside when popup is open, then work normally. But if you click on this text OPEN, then ending animation won't work.
Animation appearing and decreasing from right top to bottom and closing from bottom to top. It should work in both directions but alternately. It currently only works when you want close popup.
JSFiddle
CSS
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.tsc_1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Script
$(document).ready(function() {
$("#e_a_c").click(function(e) {
$("#t_1").toggle();
setTimeout(function() {
$("#t_1").addClass("tsc_1");
}, 1);
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#t_1 *')) {
$("#t_1").removeClass("tsc_1");
setTimeout(function() {
$('#t_1').removeAttr('style');
}, 150)
}
});
});
HTML
<a class="open-edit-popup" id="e_a_c">OPEN</a>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>

Probably NOT the answer; more a starter.
I don't think you will reach your expectations with a full CSS solution, just because closing your menu by clicking outside of it can't be done without javascript.
Anyway, this is a working version with javascript / jquery
https://jsfiddle.net/piiantom/98sfoLcg/
I reworked the javascript part in order to have a functional event management.
The bugs you are refering to are fixed.
HTML
<a class="open-edit-popup" id="e_a_c">OPEN</a>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
JAVASCRIPT
$(document).ready(function() {
$("#e_a_c").click(function(e) {
e.stopPropagation();
e.preventDefault();
if ($("#t_1").hasClass("tsc_1")) {
$("#t_1").removeClass("tsc_1");
} else {
$("#t_1").addClass("tsc_1");
}
});
$(document).click(function(e) {
if ($("#t_1").hasClass("tsc_1")) {
$("#t_1").removeClass("tsc_1");
}
});
});
CSS
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.tsc_1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
For the full CSS version, this is a working version by using the checkbox input hack. But, the opening / closing is only managed by clicking on OPEN. Menu is not closed when clicking outside.
https://jsfiddle.net/piiantom/oht40Lk5/
Besides, all your menu is nested inside a <label>, which is not that good
HTML
<label>OPEN<input type="checkbox" class="open-edit-popup" id="e_a_c"/>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
</label>
CSS
#e_a_c{
position: absolute;
opacity: 0;
cursor: pointer;
}
#e_a_c:checked+#e_a_p #t_1{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}

jQuery functions are not working

I modified the menu animation code from this page ...
https://codepen.io/designcouch/pen/Atyop
... and have the button open and close my menu (on click, it should show and hide #mainmenu ... by toggling the class .menuview on and off). However, it's not working. Not sure what happened ... and need some help. I've been racking my brain over this for awhile...
My code is below...
JAVASCRIPT. I don't see anything wrong...
// Menu Button
$(document).ready(function(){
$('#nav-icon3').click(function(){
$('#mainmenu').toggleClass('menuview');
$(this).toggleClass('open');
});
});
HTML (I'm using WordPress to show the menu)
<div id="mainmenu">
<?php wp_nav_menu( array( 'theme_location' => 'main-navigation', 'container' => '', 'items_wrap' => '<ul id="menu" class="%2$s">%3$s</ul>' ) ); ?>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
STYLES (this is the responsive section of the stylesheet. Full stylesheet at http://www.silkvodka.com/wp-content/themes/silkvodka/style.css )
#mainmenu { position: absolute; top: -59999px; left: -59999px; /* Hide Menu */}
#mainmenu.menuview { position:absolute; top:60px; left:10px; display:block; float:none; width:146px; z-index:99; }
#nav-icon3 { display:block;
width: 60px;
height: 60px;
float:none;
position: absolute;
top:0; left:200px;
background-color:#494949;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 40px;
margin:0 10px;
background: #FFF;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) { top: 17px; }
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) { top: 30px; }
#nav-icon3 span:nth-child(4) { top: 43px; }
#nav-icon3.open span:nth-child(1) { top: 14px; width: 0%; left: 50%;}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) { top: 14px; width: 0%; left: 50%; }
You can view the entire page here: http://www.silkvodka.com/cocktails/ (use a small browser window, otherwise, the responsive button wont be visible)

you are loading your javascript.js file before jquery. Your javascript.js file attempts to use jquery... switch these script tags around like:
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/javascript.js"></script>
This was evident by the console error "Uncaught ReferenceError: $ is not defined" which indicates you are attempting to use jquery berfore it's available.

When using wordpress, use jQuery instead of $
jQuery(document).ready(function(){
jQuery('#nav-icon3').click(function(){
jQuery('#mainmenu').toggleClass('menuview');
jQuery(this).toggleClass('open');
});
});
That should run :)

Hover Zoom Effect While Using Object-Fit: Cover

My goal is to have a zoom in effect when a user hovers over an image on my page. I have found code that has this effect;
.transition {
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
}
#content {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
Adding the transition to the content when the user hovers over the image.
The problem that I am having is using this technique combined with object-fit: cover. I want the image to fit into a fixed size box (Height: 250px; Width: 25%), while maintaining its aspect ratio (which is accomplished using object-fit: cover).
But, when a user hovers over an image with object-fit: cover, it reverts back to its old aspect ratio, does the zoom, and then goes back to the proper aspect ratio. This leads to some very odd visuals, which can be seen in the following fiddle;
http://jsfiddle.net/y4yAP/982/
Removing the object-fit: cover on #content will fix the problem with the zoom, but distort the aspect ratio.
Any idea how to fix this?

object-fit:cover isn't widely supported and I'm not very familiar with it, I don't know if you are required to use it but I tried something I am more familiar with.
If all the images are 'landscape' then you can use width: 100% and height: auto and the CSS will maintain the aspect ratio for you. To position the images centered in the container I applied position: relative to the container and position: absolute to #content. See: https://css-tricks.com/almanac/properties/p/position/
For the zoom you can just use #content:hover { ... } in your CSS (unless you need jQuery for other purposes).
HTML:
<div id="imageDiv">
<img id="content" src="http://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png" />
</div>
CSS:
#content:hover {
-webkit-transform: translateX(-50%) translateY(-50%) scale(1.6);
-moz-transform: translateX(-50%) translateY(-50%) scale(1.6);
-o-transform: translateX(-50%) translateY(-50%) scale(1.6);
transform: translateX(-50%) translateY(-50%) scale(1.6);
}
#content {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
#content {
position: absolute;
top: 50%;
left: 50%;
height: auto;
width: 100%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#imageDiv {
position: relative;
height: 250px;
width: 450px;
overflow: hidden;
}
FIDDLE (sans js): http://jsfiddle.net/pqs4vef7/2/

Please check all you need to do is the the width to "max-width", and remove the object-fit:
www.jsfiddle.net/y4yAP/985/

How to add zoom and flip to an image using css/jquery

I am trying to add both flip and zoom effects, But I am able to achieve only one effect.
Use case is when I click on the Image the image will zoom, now i need to add the flip effect before the mouseleave the image.
Can anyone please help me out with the output using my code.
here it is what I have tried :
HTML
<div class="flip">
<div class = 'card'>
<img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" />
</div>
</div>
CSS
.zoom_img {
height: 250px;
width: 250px;
/* -moz-transition: -moz-transform 0.1s ease-in;
-webkit-transition: -webkit-transform 0.1s ease-in;
-o-transition: -o-transform 0.1s ease-in; */
-webkit-transition: -webkit-transform 0.5s ease-in;
-o-transition: -webkit-transform 0.5s ease-in;
}
.zoom_img_press {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card .flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
Javascript
$(document).ready(function() {
$('.flip').click(function(){
$(this).find('.zoom_img').addClass('zoom_img_press').mouseleave(function(){
$(this).removeClass('zoom_img_press');
});
});
$(this).find('.zoom_img').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
});
});
Demo

Try this i think it will help you..
Class with multiple transform.
.zoom-flipper{
-moz-transform: scale(2.2) rotatex(-180deg);
-webkit-transform: scale(2.2) rotatex(-180deg);
-o-transform: scale(2.2) rotatex(-180deg);
transform: scale(2.2) rotatex(-180deg);
}
Corresponding Script:
$('.flip').click(function(){
$(this).find('.zoom_img').addClass('zoom-flipper').mouseleave(function(){
$(this).removeClass('zoom-flipper');
});
});
Here is the Demo

Create two separate JavaScript functions then write jQuery code to manipulate the css for the image within the functions. JQuery css manipulation code example:
$(".className").css({"background-color":"black","font-size":"12px"});
You can set any css property within the curly brackets.
Then you can call the JavaScript functions on the elements DOM events. So the zoom function will be called with the onClick event and the flip function will be called on the onMouseOut event.

Elements shakes during use jQuery.animate() [duplicate]

I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.
You can see it happening here:
http://jsfiddle.net/MfUMd/1/
HTML:
<div class="wrap">
<img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>
<div class="wrap">
<div class="block"></div>
</div>
CSS:
.wrap {
margin:50px auto;
width: 100px;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
display:block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Comment out the margin:0 auto; line to make it go away.
Anyone have any ideas of how to stop this while keeping the page centered?
I'm using Version 24.0.1312.57 on OSX 10.6.8
Cheers

Actually just add this to the site container which holds all the elements:
-webkit-backface-visibility: hidden;
Should fix it!
Gino

I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.

will-change: transform; on the element helped to me in 2022 (Chrome). No more 1px shift of the text inside the element after zoom animation.

there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.
Anyway, I will suggest this approach instead:
body{
width:100%;
float:left;
}
.wrap {
margin: 50px 45%;
width: 5%;
float: left;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Here is the updated fiddle

For 3d transform use this instead:
-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);