I have customised the CSS of the view button and add to cart button
.sj_vm_deals_wrap .item:hover .sj_vm_deals_popup{
display:block;
filter: alpha(opacity=10000);
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
transition: all 0.666666666666667s ease 0s;
}
And
.sj_vm_deals_wrap .item .sj_vm_deals_popup{
display:block;
filter: alpha(opacity=10000);
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(170px,0);
transition: all 0.666666666666667s ease 0s;
}
before it was only :
.sj_vm_deals_wrap .item:hover .sj_vm_deals_popup{
display:block;
}
But now when you hover on products you will see that the slide-in-from-outside effect looks not correct. How can I fix this?
you can see it here : ibn.reviewcost.com
You are (probably) looking for:
.owl-carousel .item {
overflow: hidden;
}
Which removes the 'not correct' slide-in-from-outside effect.
Related
I'm trying to put some images in a decorative way, however, I can't seem to get the code to work properly mainly on the CSS side. I'm pretty sure I'm doing something wrong with the selectors and was wondering if someone would be willing to take a look at it.
It seems that the code breaks when I add the <a> tag but I would really like to include the link to the images.
Broken code with <a> tag: JSFiddle
Working code without <a> for reference: JSFiddle
I'm hoping I can get the one with the <a> tag working.
.photos img {
position: absolute;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
padding: 10px 10px 30px 10px;
background: white;
border: solid 1px black;
}
.photos img:nth-of-type(1) {
left: 50px;
top: 50px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
.photos img:nth-of-type(2) {
left: 150px;
top: 100px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photos img:nth-of-type(3) {
left: 250px;
top: 50px;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}
.photos img:nth-of-type(4) {
left: 350px;
top: 150px;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.photos img:nth-of-type(5) {
left: 450px;
top: 50px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.photos img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 10;
-webkit-transform: rotate(380deg) scale(1.5);
-moz-transform: rotate(380deg) scale(1.5);
-o-transform: rotate(380deg) scale(1.5);
transform: rotate(380deg) scale(1.5);
z-index: 10;
}
<div class="photos">
<img src="https://lorempixel.com/160/220"/>
<img src="https://lorempixel.com/160/220"/>
<img src="https://lorempixel.com/160/220"/>
<img src="https://lorempixel.com/160/220"/>
<img src="https://lorempixel.com/160/220"/>
</div>
You're using nth-of-type(1) to place the images, but because they are now children of anchor tags, they're all the first child. Therefore they will all be placed in the same location and get the .photos img:nth-of-type(1) CSS.
Try doing it like this instead:
.photos a:nth-of-type(1) img {
left: 50px;
top: 50px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
Full result: https://jsfiddle.net/kLnn2jLu/4/
I have a simple bounce in animation for my figure , see HTML below:
<figure>
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="">
<figcaption>
<!-- empty for now -->
</figcaption>
</figure>
My CSS animation is as follows:
#keyframes drop-in-thumb {
0% {
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0.8;
}
35% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
55% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
70% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
85% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
The fiddle can be seen HERE.
The problem is my animation is quite jerky , I.E. it does't have a realistic bounce in effect , it looks clearly quite jerky. My question is what other property in the keyframes apart form the % breakpoints can i use to tweak and make my animation smooth ?
Tweaking the % breakpoints really helped me make the animation much more smoother and but its really not yet realistic yet. What other CSS animation property can i use to make this animation smoother ?
It would be great if somebody could demonstrate how i could perfect and make this animation much more smoother.
P.S. i am aware of the library animate.css but don't want to use it.
The animation-timing-function property should improve this considerably.
Try adding the following to the styles for figure:
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
I've edited your fiddle to show the difference: https://jsfiddle.net/ssexmh3s/2/
I'm using transform: rotate(-2deg); on a section. When the user hovers over the section, it changes in size using transform: scale(1.1);.
There's one page on my site where I'd like to maintain the rotation, but not the scale when the user hovers over the section. Is there a way to reset transform: scale(1.1); without resetting transform: rotate(-2deg);?
Here's the code in full:
section {
display: block;
width: 100px;
height: 100px;
padding: 10px;
background: red;
/* Rotate */
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
/* Easing */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
section:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.some-page section:hover {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
Fiddle here.
You could just set the original transform value back again on the hover selector like given below:
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
This would make sure that the rotation stays at -2 degree but the scale would not happen as this selector is more specific and would take precedence over the other generic hover selector.
section {
display: block;
width: 100px;
height: 100px;
padding: 10px;
background: red;
/* Rotate */
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
/* Easing */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
section:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
/* Just for demo */
section {
margin: 10px;
}
<section>I'm some content</section>
<div class="some-page">
<section>I'm some content</section>
</div>
My code doesnt work in Firefox and I dont know why. Any advices? It works fine in Chrome, IE and Opera. I tried almost all prefixes combinations but still it wont work. Is it possible that something is wrong with my PC or Firefox browser?
.span-accent {
color: rgb(60, 185, 120);
-webkit-animation: breath 2s infinite;
-moz-animation: breath 2s infinite;
animation: breath 2s infinite;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes breath {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
25% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-moz-transform: scale(1);
transform: scale(1);
}
75% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>
Ok guys, I found it.
Problem is in <span> element. For some reason Firefox doesnt animate inline elements.
So what I did is change a <span> atribute to display: inline-block.
It just wont work strictly for any inline element.
What I'm trying to achieve is to 3D flip a single letter inside a text.
<h1>WebN<span class="text-muted" id="logo-alpha">α</span>me</h1>
In this particular case i want to horizontally flip α when it's hovered with the mouse.
I tried doing the same by putting the α in an outside div and it works fine, but it doesn't when I try doing the same with the span inside h1.
This is my CSS:
#logo-alpha {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#logo-alpha:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
You are facing this issue : CSS tranform can't apply on inline elements see here : dev.w3.org transformable elements so you need to change the default display property of the <span> element to inline-block.
FIDDLE
CSS :
#logo-alpha{
display:inline-block;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
}
h1:hover #logo-alpha{
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
Below is some code for both X and Y flips - the important thing is your span needs display:inline-block in order for any 3d transformation to be applied.
Demo Fiddle
HTML
<h1>WebN<span class="flipX">α</span>me</h1>
<h1>WebN<span class="flipY">α</span>me</h1>
CSS
span {
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: perspective(250px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(250px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
display:inline-block;
}
span.flipX:hover {
-webkit-transform: perspective(250px) rotateX(360deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(250px) rotateX(360deg) rotateY(0deg) rotateZ(0deg);
}
span.flipY:hover {
-webkit-transform: perspective(250px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
transform: perspective(250px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}
user hover pseudo class,
.text-muted{font-zise:12px;}
.text-muted:hover{font-size:20px; /* opr what ever you want to do when mouse hover*/ }
or may be you want something this http://css3playground.com/3d-flip-cards/
try it