We Keep Coding

If I insert a DIV a second time, it will only overlap and the JS will not work anymore

I have created a product card for products. This works too, but if I insert a second one, nothing at all works. The cards overlap and the JS does not work anymore ...
<div id="make-3D-space">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img class="img" src="https://www.alfru.com/wp-content/uploads/2017/03/Acerola.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">Informationen
</div>
<div class="stats">
<div class="stats-container">
<span class="product_name">Acerola</span>
<p>Saftkonzentrat</p>
<div class="product-options">
<strong>Verfügbare Produkte</strong>
<span>Acerolasaftkonzentrat (blank 42° Brix)</span>
<strong>Verpackungsgrößen</strong>
<div class="product-options">
<span>20 Kg Bag-in-Box (Aseptic)</span>
<span>200 Kg Fass (Aseptic)</span>
</div>
</div>
</div>
</div>
</div>
<div id="product-back">
<div class="shadow"></div>
<div id="carousel">
<div>
<ul>
<li>
<h3 class="informations">Informationen</h3>
<div>
<p class="product-desc">Acerolasaft-Konzentrat ist eine klare Flüssigkeit, die aus entpektinisiertem, gefiltertem, unvergorenem Fruchtsaft aus gesunden, sauberen Früchten durch physikalisches Abtrennen von Wasser hergestellt wird.</p>
</div>
<div>
<p class="contact-text">Weitere Produktinformationen auf Anfrage</p>
</div>
</li>
</ul>
</div>
<div id="flip-back">
<div id="cy"></div>
<div id="cx"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
I have no idea why i not works... CSS:
/* Generals resets and unimportant stuff */
* { margin: 0px; padding: 0px; }
body {
background: #eaebec;
font-family: "Open Sans", sans-serif;
}
/* --- Product Card ---- */
#make-3D-space{
position: relative;
width:340px;
height:500px;
transition: transform 5s;
position:absolute;
}
#product-front, #product-back{
width:335px;
height:500px;
background:#fff;
position:absolute;
left:-5px;
top:-5px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#product-back{
display:none;
transform: rotateY( 180deg );
}
#product-card.animate #product-back, #product-card.animate #product-front{
top:0px;
left:0px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#product-card{
width:325px;
height:470px;
position:absolute;
top:10px;
left:10px;
overflow:hidden;
transform-style: preserve-3d;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
div#product-card.flip-10{
-webkit-transform: rotateY( -10deg );
-moz-transform: rotateY( -10deg );
-o-transform: rotateY( -10deg );
transform: rotateY( -10deg );
transition: 50ms ease-out;
}
div#product-card.flip90{
-webkit-transform: rotateY( 90deg );
-moz-transform: rotateY( 90deg );
-o-transform: rotateY( 90deg );
transform: rotateY( 90deg );
transition: 100ms ease-in;
}
div#product-card.flip190{
-webkit-transform: rotateY( 190deg );
-moz-transform: rotateY( 190deg );
-o-transform: rotateY( 190deg );
transform: rotateY( 190deg );
transition: 100ms ease-out;
}
div#product-card.flip180{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
transition: 150ms ease-out;
}
#product-card.animate{
top:5px;
left:5px;
width:335px;
height:500px;
box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
.stats-container{
background:#fff;
position:absolute;
top:386px;
left:0;
width:265px;
height:300px;
padding:27px 35px 35px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#product-card.animate .stats-container{
top:272px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.img {
position: absolute;
top: 0px;
bottom: 150px;
left: 0px;
right: 0px;
margin: auto;
}
.product-desc {
text-algin: center;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}
.contact-text {
text-align: center;
margin-top: 150px;
font-size: 13px;
}
.contact-button: {
top:112px;
left:50%;
margin-left:-85px;
border:2px solid #fff;
color:#fff;
font-size:19px;
text-align:center;
text-transform:uppercase;
font-weight:700;
padding:10px 0;
width:172px;
opacity:0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#view_details:hover{
background:#fff;
color:#22aadd;
cursor:pointer;
}
.informations {
text-align: center;
margin-top: 50px;
}
.stats-container .product_name{
font-size:22px;
color:#393c45;
}
.stats-container p{
font-size:16px;
color:#b1b1b3;
padding:2px 0 20px 0;
}
.stats-container .product_price{
float:right;
color:#48cfad;
font-size:22px;
font-weight:600;
}
.image_overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#22aadd;
opacity:0;
}
#product-card.animate .image_overlay{
opacity:0.7;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.product-options{
padding:2px 0 0;
}
.product-options strong{
font-weight:700;
color:#393c45;
font-size:14px;
}
.product-options span{
color:#969699;
font-size:14px;
display:block;
margin-bottom:8px;
}
#view_details{
position:absolute;
top:112px;
left:50%;
margin-left:-85px;
border:2px solid #fff;
color:#fff;
font-size:19px;
text-align:center;
text-transform:uppercase;
font-weight:700;
padding:10px 0;
width:172px;
opacity:0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#view_details:hover{
background:#fff;
color:#22aadd;
cursor:pointer;
}
#product-card.animate #view_details{
opacity:1;
width:152px;
font-size:15px;
margin-left:-75px;
top:115px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.colors div{
margin-top:3px;
width:15px;
height:15px;
margin-right:5px;
float:left;
}
div.colors div span{
width:15px;
height:15px;
display:block;
border-radius:50%;
}
div.colors div span:hover{
width:17px;
height:17px;
margin:-1px 0 0 -1px;
}
div.c-blue span{background:#6e8cd5;}
div.c-red span{background:#f56060;}
div.c-green span{background:#44c28d;}
div.c-white span{
background:#fff;
width:14px;
height:14px;
border:1px solid #e8e9eb;
}
div.shadow{
width:335px;height:520px;
opacity:0;
position:absolute;
top:0;
left:0;
z-index:3;
display:none;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
}
#product-back div.shadow{
z-index:10;
opacity:1;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
}
#flip-back{
position:absolute;
top:20px;
right:20px;
width:30px;
height:30px;
cursor:pointer;
}
#cx, #cy{
background:#d2d5dc;
position:absolute;
width:0px;
top:15px;
right:15px;
height:3px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#flip-back:hover #cx, #flip-back:hover #cy{
background:#979ca7;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#cx.s1, #cy.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cy.s2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cy.s3{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s2{
-ms-transform: rotate(140deg);
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s3{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#carousel{
width:335px;
height:500px;
overflow:hidden;
position:relative;
}
#carousel ul{
position:absolute;
top:0;
left:0;
}
#carousel li{
width:335px;
height:500px;
float:left;
overflow:hidden;
}
.arrows-perspective{
width:335px;
height:55px;
position: absolute;
top: 218px;
transform-style: preserve-3d;
transition: transform 5s;
perspective: 335px;
}
.carouselPrev, .carouselNext{
width: 50px;
height: 55px;
background: #ccc;
position: absolute;
top:0;
transition: all 200ms ease-out;
opacity:0.9;
cursor:pointer;
}
.carouselNext{
top:0;
right: -26px;
-webkit-transform: rotateY( -117deg );
-moz-transform: rotateY( -117deg );
-o-transform: rotateY( -117deg );
transform: rotateY( -117deg );
transition: all 200ms ease-out;
}
.carouselNext.visible{
right:0;
opacity:0.8;
background: #efefef;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
.carouselPrev{
left:-26px;
top:0;
-webkit-transform: rotateY( 117deg );
-moz-transform: rotateY( 117deg );
-o-transform: rotateY( 117deg );
transform: rotateY( 117deg );
transition: all 200ms ease-out;
}
.carouselPrev.visible{
left:0;
opacity:0.8;
background: #eee;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
#carousel .x, #carousel .y{
height:2px;
width:15px;
background:#48cfad;
position:absolute;
top:31px;
left:17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#carousel .x{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
top:21px;
}
#carousel .carouselNext .x{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#carousel .carouselNext .y{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
/* Button */
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn,
button {
background: #1d1d1d;
border: none;
font-size: 10px;
font-size: 1rem;
background-color: #1d1d1d;
color: white;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 14px 21px;
padding: 1.4rem 2.1rem;
border: 2px solid #1d1d1d;
transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
display: inline-block;
cursor: pointer;
width: 100%;
min-width: 200px;
min-width: 20rem;
outline: none;
vertical-align: middle;
text-align: center;
position: relative;
overflow: hidden;
}
#media (min-width: 400px) {
.btn,
button {
width: auto;
}
}
#media (min-width: 800px) {
.btn,
button {
font-size: 1.1rem;
padding: 1.6rem 2.8rem;
}
}
.btn:hover,
button:hover {
background: #2a2a2a;
border-color: #2a2a2a;
color: #fff;
}
.btn-border {
background-color: transparent;
color: #1d1d1d;
}
.btn-arrow {
position: relative;
transition: background-color 300ms ease-out;
}
.btn-arrow span {
display: inline-block;
position: relative;
transition: all 300ms ease-out;
will-change: transform;
}
.btn-arrow:hover span {
-webkit-transform: translate3d(-1rem, 0, 0);
transform: translate3d(-1rem, 0, 0);
}
.btn-arrow svg {
position: absolute;
width: 1.1em;
right: 0px;
right: 0rem;
opacity: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: all 300ms ease-out;
will-change: right, opacity;
}
.btn-arrow svg * {
stroke-width: 5;
stroke-color: transparent;
}
.btn-arrow:hover svg {
opacity: 1;
right: -2rem;
}
And my JS:
$(document).ready(function(){
// Lift card and show stats on Mouseover
$('#product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('#view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function(){
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('#product-front, #product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function(){$('#cx, #cy').addClass('s2');}, 100);
setTimeout(function(){$('#cx, #cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('#flip-back').click(function(){
$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip90');
$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
});
Maybe someone can help me to get five cards in a row.
Vielleicht schaut hier ja auch ein Deutscher drauf, ich möchte halt fünf Produkte in eine Reihe bekommen. Das kann ich aber nicht weil sich das ganze dauerhaft überlappt. :(

How to remove scrollbar which is shown on using transform scale?

I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}

Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>

Transition on :hover:before not working properly

Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.
I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)
If anyone could take the time to help me out that'd be highly appreciated, thanks!
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>

To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).
In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#slide1:hover:before {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>

css3 transition is not smooth in safari

I'm rebuilding someone's else CSS3 transition to make it work across Safari, Chrome, and Firefox. In their version (mouse over the package images), the transition works well in Safari, but not in the other two: The elements get stuck in the "up" position. In my version, the transition runs smoothly in FF and Chrome, but is jerky in Safari (plus it's not rotating). Any ideas? My CSS is below.
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, transform .25s ease;
-moz-transition: margin .1s ease, transform .25s ease;
-o-transition: margin .1s ease, transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, transform .25s ease-out;
-moz-transition: margin .1s ease, transform .25s ease-out;
-o-transition: margin .1s ease, transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}

While I agree that jQuery is not necessary for this problem, the real issue appears to be an inconsistent use of browser prefixes.
You needed to add prefixes for transform: rotate() on both .package-down and .package-up.
Also this:
-webkit-transition: margin .1s ease, transform .25s ease-out;
Should be this:
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
And it would be a similar adjustment for all the other prefixed transition properties.
See Codepen
$(function() {
$('.package-down').hover(function() {
$('.package-down').toggleClass('package-up');
});
});
img {
margin: 0;
max-width: 100%;
}
.main-packages-wrapper {
position: relative;
width: 80%;
min-height: 575px;
display: block;
padding-top: 80px;
z-index: 1; }
.package.original {
margin-right: -15px;
margin-left: -15px;
z-index: 2; }
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, -webkit-transform .25s ease;
-moz-transition: margin .1s ease, -moz-transform .25s ease;
-o-transition: margin .1s ease, -o-transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
-moz-transition: margin .1s ease, -moz-transform .25s ease-out;
-o-transition: margin .1s ease, -o-transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<body>
<div class="primary-content">
<section class="main-packages-wrapper">
<div class="package-down multigrain">
<img src="http://www.batterworld.com/wp-content/themes/batterworld/images/package_multigrain.png">
</div>
</section>
</div><!--END PRIMARY CONTENT-->

I'm actually astonished that your jQuery hover function does work at all, because what you'd actually need is mouseenter -> addClass and mouseleave -> removeClass, but it might be me not exactly being aware of how jQuery's .hover() works.
Nonetheless, there is absolutely no need for jQuery or even Javascript to change styles on mouseover. You have the pseudo-selector :hover for exactly this purpose: Put the styles your want to transition to into
.package-down:hover { /* properties to transition to */ }
Next, do not repeat styles that the element already has and that do not change.
Last, if your problem is that not all property transition are taking an equal amount of time, don't specify so:
transition: margin .1s ease, transform .25s ease-out;
This will make the margin changes take 0.1s, but the rotation to take 0.25s.
Please describe more concisely what your transition is to look/perform like.
http://codepen.io/anon/pen/aOJmKe
Also, please be aware that you are not doing a css animation here, but a css transition. Read more about the differences here:
CSS: Animation vs. Transition

Yup, the javascript was definitely extraneous. All that was needed were CSS transitions applied to the :hover state of the elements. I did end up repeating some transition code, because that enabled the transitions to run in reverse when the cursor leaves the hovered element. Thanks! Finished codepen here.
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.package {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.package:hover {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.original:hover{
margin-left: -30px;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
width: 33.33%;
z-index: 2;
}

Display Dialog Box once every 3 hours

Works on my website but want to it to show only once per 2-3 hours:-
https://www.helpingtechie.com
This not my code just download from a website which gave me.
I think cookies will be needed to add.
Code Used:-
.guestwarn-mask{
position:absolute;
background:#fff;
opacity:0.5;
filter:alpha(opacity=50);
z-index: 4;
overflow: hidden;
}
.guestwarn-layout{
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-moz-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-ms-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-o-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
position:absolute;
border:1px solid #eee;
background:#fff;
box-shadow: 1px 2px 4px rgba(100,100,100,0.1);
display:none;
z-index:5;
}
.guestwarn-layout-animate{
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.guestwarn-layout-close{
-webkit-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-moz-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-ms-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-o-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
top:-300px !important;
}
.guestwarn-content{
position:relative;
color:#555;
overflow:hidden;
}
.guestwarn-title{
position:absolute;
left:0px;
top:0px;
height:40px;
width:100%;
overflow:hidden;
background:#eee;
font:normal 16px Microsoft Yahei;
color:#fff
}
.guestwarn-title span{
display:block;
float:left;
padding:10px 20px;
background:#08c;
}
.guestwarn-close{
position:absolute;
right:0px;
top:0px;
background:#E04343;
display:block;
text-decoration:none;
font-family:Tahoma;
font-size:20px;
line-height:37px;
height:40px;
width:40px;
text-align:center;
color:#fff
}
.guestwarn-close:hover{
opacity:0.8;
filter:alpha(opacity=80);
}
.guestwarn-html{
padding:50px 20px 20px 20px;
font:normal 16px Microsoft Yahei;
line-height: 150%;
text-align:left;
}
.guestwarn-html a{
color:#58f
}
<script src="https://www.helpingtechie.com/jscripts/jquery.guestwarn.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$.guestwarn({
mask:true,
height: 'auto',
title:'Dear Guest',
html:'If you read this, it means you are not registered. <br>Click here to register in a few simple steps, you will enjoy all features of our Forum.',
callback:function(){
console.log('CALLBACKS')
}
});
});
</script>

if i understood your "question" corectly... This can help:
$(function(){
setInterval(function() {
$.guestwarn({
mask:true,
height: 'auto',
title:'Dear Guest',
html:'If you read this, it means you are not registered. <br>Click here to register in a few simple steps, you will enjoy all features of our Forum.',
callback:function(){
console.log('CALLBACKS')
}
});
}, 10800000);
// 10800000 is 3 hours in miliseconds
});