Everything looks fine for about twelve seconds. Then the contact forms stop submitting. No error message. No console warning. Just… ...
Someone just exploited a hole in WordPress core that lets them take over your server without logging in. Here's what ...
Updated Elementor and your site broke? I walk through the actual fixes that worked when it happened to a client ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post as a reference for you to enter the CSS code into the Custom CSS option inside the containers, so below is everything you will need!
You can download the complete template here
Here are some images to use when following the example,
These are copyrighted so please don’t use them outside of this tutorial.
The css code used in the column 1 Container that houses the first images.
This is put into the Custom CSS tab under Advanced Settings of the 1st column :
.image1 img{
animation: imagemovement1 15s ease-in-out infinite alternate;
}
#column1 {
height:700px;
max-height: 700px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}
@keyframes imagemovement1 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
The css code used in the column 2 Container that houses the second set of images.
This is put into the Custom CSS tab under Advanced Settings of the 2nd column :
.image2 img{
animation: imagemovement2 15s ease-in-out infinite alternate;
}
#column2 {
height:700px;
max-height: 700px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}
/* Keyframes for the looping animation */
@keyframes imagemovement2 {
0% {
transform: translateY(-100%); /* Start at the bottom of the container */
}
100% {
transform: translateY(0); /* Move to the top of the container */
}
}
The css code used in the column 3 Container that houses the third set ofimages.
This is put into the Custom CSS tab under Advanced Settings of the 3rd column :
.image3 img{
animation: imagemovement3 15s ease-in-out infinite alternate;
}
#column3 {
height:700px;
max-height: 700px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}
@keyframes imagemovement3 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}