I have a wordpress site which i am helping a friend out with
https://capturingscotland.com/galleries
When hovering over the gallery images it shows a transparent red image with a more button. It works fine in chrome, IE, Firefox but when i have tried it on iphones and Ipads with safari it dosent seem to work. Below is the CSS classes used. porto-item is the gallery item
.porto .porto-item:hover img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
opacity: .2;
}
.porto .porto-item:hover .porto-info {
opacity: 1;
box-sizing: border-box;
height: 100%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.porto .porto-item:hover .title {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .categories {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .more {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
If you want it so that whenever the item is touched the hover appears (like if scrolling) then you can add: cursor: pointer; to the element you wish the hover to appear on. Without this iOS only styles :hover events on links.
Related
I makes css keyframes for parallax animate. In Chrome, Opera I have smooth transition.
In Safari I have very braking animate.
#keyframes animatedParallelogram {
0 {
background-position: 1000px 0px;
transform: translateX(-100%) scale(1.1);
}
100% {
background-position: -1000px 0px;
transform: translateX(100%) scale(1.1);
}
}
#-moz-keyframes animatedParallelogram {
0 {
background-position: 1000px 0px;
-moz-transform: translateX(-100%) scale(1.1);
}
100% {
background-position: -1000px 0px;
-moz-transform: translateX(100%) scale(1.1);
}
}
#-webkit-keyframes animatedParallelogram {
0 {
background-position: 1000px 0px;
-webkit-transform: translateX(-100%) scale(1.1);
}
100% {
background-position: -1000px 0px;
-webkit-transform: translateX(100%) scale(1.1);
}
}
#-o-keyframes animatedParallelogram {
0 {
background-position: 1000px 0px;
-o-transform: translateX(-100%) scale(1.1);
}
100% {
background-position: -1000px 0px;
-o-transform: translateX(100%) scale(1.1);
}
}
You can open my example and try to slide down: OPEN EXAMPLE
Unfortunately, Safari have braking animate, if used CSS animate «background-position» and other transform animation together.
I'm looking for solution to my problem. I want to zoom in and out without stoping every second in a div with backgroung-image.
Something like this fruit in the game:
https://www.google.co.il/search?source=hp&ei=ghU7XfaEBai4gwfA6rrIDA&q=snake&oq=snaj&gs_l=psy-ab.1.0.35i305i39j0i10l9.776.1740..2868...0.0..0.192.754.0j5......0....1..gws-wiz.....0..35i39j0i131j0j0i67.KPZVLy3h8CU
I find the solution below but I use react so I need css/js solution and not jQuery one.
Zoom an image every one second jQuery
The solution is to use CSS "breathing" animation. An example how it works:
#breathing-button {
width: 270px;
padding: 20px;
margin: 50px auto;
border: 1px solid #d1d1d1;
-webkit-animation: breathing 7s ease-out infinite normal;
animation: breathing 7s ease-out infinite normal;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 3px;
text-align: center;
}
#-webkit-keyframes breathing {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
<div id="breathing-button">Breathing Button</div>
I am trying to use a CSS (buzz out) animation as can be seen here.
Works perfectly in the demo, I have copied the relevant CSS and can't get it to work on a website so I even made a simple jsFiddle and it still doesn't work.
Please can someone point out what I am evidently missing as this is all the CSS seems to contain and I am a bit baffled to how it is working with the same style declaration on the demo but not in the jsFiddle.
Code snippet included below as well as at jsFiddle.
[class^="hvr-"] {
/* display: inline-block; */
/* vertical-align: middle; */
margin: .4em;
padding: 1em;
cursor: pointer;
background: #e1e1e1;
text-decoration: none;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.hvr-buzz-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
Buzz Out
You also need the #keyframes that define the animation:
#-webkit-keyframes hvr-buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
#keyframes hvr-buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
[class^="hvr-"] {
/* display: inline-block; */
/* vertical-align: middle; */
margin: .4em;
padding: 1em;
cursor: pointer;
background: #e1e1e1;
text-decoration: none;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.hvr-buzz-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
Buzz Out
They were also in the CSS file above the code you already had.
I have a less class as a function. I use calc() to set scale value, it working on chrome but not Firefox. this is my class:
.zoom(#value) {
transform: scaleX(#value);
-moz-transform: scaleX(#value);
-ms-transform: scaleX(#value);
-webkit-transform: scaleX(#value);
transform-origin: 0;
.blocFreq {
&:before {
-webkit-transform: scaleX(calc(1/#value)) !important;
-moz-transform: scaleX(-moz-calc(1/#value)) !important;
-ms-transform: scaleX(calc(1/#value)) !important;
transform: scaleX(calc(1/#value)) !important;
}
}
span.frequence {
-webkit-transform: scaleX(calc(1/#value))rotate(-44deg) !important;
-moz-transform: scaleX(-moz-calc(1/#value))rotate(-44deg) !important;
-ms-transform: scaleX(calc(1/#value))rotate(-44deg) !important;
transform: scaleX(calc(1/#value))rotate(-44deg) !important;
}
.text,
.text-service,
.popover {
-webkit-transform: scaleX(calc(1/#value)) !important;
-moz-transform: scaleX(calc(1/#value)) !important;
-o-transform: scaleX(calc(1/#value)) !important;
-ms-transform: scaleX(calc(1/#value)) !important;
transform: scaleX(calc(1/#value)) !important;
}
}
Try to remove calc function and use only (1/#value). I think that will fix your bug.
This is my code and transform is working in chrome browser but in firefox it is not working.
.delete-white a:before {
background: none repeat scroll 0 0 #FFFFFF;
height: 15px;
left: 6px;
margin-top: -7px;
width: 5px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
}
.delete-white a:after {
background: none repeat scroll 0 0 #FFFFFF;
height: 5px;
left: 1px;
margin-top: -2px;
width: 15px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
}
Two notes
You need to have content to :before/:after pseudo elements
You have forgotten the unprefixed version: transform: rotate(45deg) scale(1);
Add this rule to element: "display: inline-block;"
You need to include the standard, non-prefixed version (i.e. transform: rotate(45deg) scale(1);) as the final definition in your list of transforms. The -moz one is deprecated, as will/should be the other ones in time. See the MDN for reference.