Hy
I have this theme.
http://venusdemo.com/wpopal/mix/fashion/
On the right side there are a few images that have an effect when we arrow above.
Thnaks in advance!
Does anyone know what kind of plug is used there or how were they created?
.image-plus-1:hover:before, .wpb_single_image .wpb_wrapper > a:hover:before {
opacity: 0.6;
transform: scale(1) rotateY(0deg);
visibility: visible;
}
.image-plus-1:before, .wpb_single_image .wpb_wrapper > a:before {
background: url("../images/plus.png") no-repeat scroll center center / 60px 60px rgba(0, 0, 0, 0.6);
content: "";
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
transform: scale(0.5) rotateY(180deg);
transition: all 0.3s ease 0s;
width: 100%;
z-index: 100;
}
Related
I want to applay a flicker animation to one button when the page is loaded (after a small delay) AND the same animation when the button is hovered. However, only one of the animations works. When both animations are not commented out, the animation when the page is loaded works. When I comment out this animation, the hover animation works. I don't understand, why it's like that.
HTML Code:
<div class="container">
Hello
</div>
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
background-image: linear-gradient(
to right bottom,
rgba(72, 80, 92, 0.444),
rgba(43, 43, 46, 0.757)
);
}
.btn:link,
.btn:visited {
text-decoration: none;
background-color: #fff;
color: rgb(70, 70, 70);
padding: 15px 40px;
display: inline-block;
border-radius: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: #fff;
animation: flickerButton 0.4s 1s;
}
.btn:hover::after {
animation: flickerButton 0.4s;
}
#keyframes flickerButton {
0% {
transform: scaleX(1) scaleY(1);
opacity: 1;
}
100% {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
}
Thank you very much for your support.
The problem is that the same animation keyframes are set on the actual pseudo element and when the element is hovered.
CSS reckons that once it's run the animation it doesn't need to do it again.
Assuming a CSS-only solution is required, this snippet has two copies of the keyframes, one for the non hovered condition, which runs the once, and one for when it is hovered when it runs once but then when unhovered the pseudo element doesn't have the animation set any more etc.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
background-image: linear-gradient( to right bottom, rgba(72, 80, 92, 0.444), rgba(43, 43, 46, 0.757));
}
.btn:link,
.btn:visited {
text-decoration: none;
background-color: #fff;
color: rgb(70, 70, 70);
padding: 15px 40px;
display: inline-block;
border-radius: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: #fff;
animation: flickerButton 0.4s 1s;
}
.btn:hover::after {
animation: flickerButton1 0.4s;
}
#keyframes flickerButton {
0% {
transform: scaleX(1) scaleY(1);
opacity: 1;
}
100% {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
}
#keyframes flickerButton1 {
0% {
transform: scaleX(1) scaleY(1);
opacity: 1;
}
100% {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
}
<div class="container">
Hello
</div>
You need to define the animation-iteration-count on the pseudo element. It's inheriting the default of running once (which happens on page load).
You can share the key-frames of flickerButton, but need to define infinite on the pseudo element so that it will loop forever on hover. You can do it shorthand on the single animation property, as follows:
.btn:hover::after {
animation: flickerButton 0.4s infinite;
}
I have got a modal sliding up with key frames. I wanted the background rgba I have in the overlay to kick in straight away when the modal starts sliding up but unable to make it work. Here is my code:
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
}
.modal{
margin: auto;
position: fixed;
overflow: scroll;
height: 100%;
animation: slidein 0.3s;
}
#keyframes slidein {
0% {
transform: translateY(400px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px);
animation-timing-function: ease-in;
}
}
Any help would be appreciated
Probably it is not working because you added height:100%and probably the parent of you overlay has not a fixed height set. Try this insteed:
.overlay {
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
}
How to clip a div with svg?
Following is the code for a css animation:
.liquid {
position: absolute;
top: -80px;
left: 0;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
transition: 0.5s;
}
.liquid::after,
.liquid::before {
content: "";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.liquid::before {
border-radius: 45%;
background: rgba(20, 20, 20, 1);
animation: animate 5s linear infinite;
}
.liquid::after {
border-radius: 40%;
background: rgba(20, 20, 20, 0.5);
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
<div class="liquid"></div>
How can I embed/ clip the above animation inside a svg image?
Such that you will get a feeling of liquid filling the following image.
Following image :
https://www.flaticon.com/svg/vstatic/svg/3331/3331104.svg?token=exp=1619182384~hmac=11bada25343c186d8f2c99de7afec2f2
(Remember it should be svg)
Possibly this if I'm understanding right.
.element {
clip-path: url(#svgClipPathID);
}
This is a very good article about clip-path:
https://www.sarasoueidan.com/blog/css-svg-clipping/#:~:text=The%20clip%2Dpath%20property%20is%20used%20to%20specify%20a%20clipping,in%20the%20CSS%20Shapes%20module.
I would like to add to add this css example to my button on my website
https://codemyui.com/ghost-button-glint-effect-3d-button/
I already tried pasting the css code in the wordpress customizer add css input...
I adjusted the class to my button....
.btn--primary
but it doesn't work
hope anybody can help me.
Thanks in advance!
#-webkit-keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
#keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
.wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button {
padding: 0.75em 2em;
text-align: center;
text-decoration: none;
color: #2194E0;
border: 2px solid #2194E0;
font-size: 24px;
display: inline-block;
border-radius: 0.3em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.button:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.button:hover {
background-color: #2194E0;
color: #fff;
border-bottom: 4px solid #1977b5;
}
.button:hover:before {
-webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(13.5em);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="wrapper">
Shiney!
</div>
I managed to get this integrated in my WordPress installation. Try using the !important tag incase there are some predefined classes in your template.
I have titles that I want to add CSS3 animation to it
I want to transform
Title
to
[Title]
And I want the square brackets to animate from the center of the word to the borders of it with animation.
something like..
Ti[]tle
to
[Title]
with animation (ofcourse i'm using :before :after to add the brackets with opacity 0 to 1)
my p style:
p:before {
content: "[";
position: absolute;
left: 50%; /*to add the bracket to the center of the word*/
opacity: 0;
transition: all 0.7s ease;
}
Thank You !
p {
display: table;
position: relative;
}
p:before,
p:after{
position: absolute;
opacity: 0;
transition: all 0.7s ease;
}
p:before {
content: "[";
left: 50%;
}
p:after {
content: "]";
right: 50%;
}
p:hover:before {
left: -5px;
opacity: 1;
}
p:hover:after {
right: -5px;
opacity: 1;
}
<p>Title</p>
<p>A Longer Title</p>
Is this what you are looking for?
with this html:
<div>
TESTING
</div>
and these css's:
div{
padding: 18px 0 18px 0;
display: inline-block;
margin-right: 40px;
}
a {
color: #999;
display: inline-block;
text-align: center;
width: 200px;
text-decoration: none;
}
a:before, a:after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
a:before {
margin-right: 10px;
content: '[';
-webkit-transform: translate(20px, -1px);
-moz-transform: translate(20px, -1px);
transform: translate(20px, -1px);
vertical-align: top;
}
a:after {
margin-left: 10px;
content: ']';
-webkit-transform: translate(-20px, -1px);
-moz-transform: translate(-20px, -1px);
transform: translate(-20px, -1px);
}
a:hover:after {
opacity: 1;
-webkit-transform: translate(0px, -1px);
-moz-transform: translate(0px, -1px);
transform: translate(0px, -1px);
}
a:hover:before {
opacity: 1;
-webkit-transform: translate(0px, -1px);
-moz-transform: translate(0px, -1px);
transform: translate(0px, -1px);
}
You get this JSFIDDLE
You can achieve this using frame animations. This way you won't have to hover the element (or anything else) for the animation to start.
See: http://jsfiddle.net/Paf_Sebastien/j2cvagjf/
Set :before and :after like this :
h1:before {
content: "[";
position: absolute;
display: block;
top: 0;
-webkit-animation: bracketleft 1s 1 forwards;
animation: bracketleft 1s 1 forwards;
}
Then handle the animation :
#-webkit-keyframes bracketleft {
0% { opacity: 0; left: 50%; }
100% { opacity: 1; left:-10px; }
}
#-webkit-keyframes bracketright {
0% { opacity: 0; right: 50%; }
100% { opacity: 1; right: -10px; }
}