| Server IP : 208.109.34.209 / Your IP : 216.73.217.134 Web Server : Apache System : Linux 209.34.109.208.host.secureserver.net 5.14.0-687.29.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Jul 23 16:18:48 EDT 2026 x86_64 User : oceanproject ( 1012) PHP Version : 8.1.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/oceanproject/public_html/wp-content/themes/reda/assets/scss/ |
Upload File : |
.img-wrapper { display: block; position: relative; z-index: 1; overflow:hidden; transform-origin: 50% 50%;
transform: translateX(-200px) skew(50deg); overflow: hidden; transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
img:first-child,{ transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) , transform 1s cubic-bezier(0.77, 0, 0.175, 1); opacity: 0; transform: translateX(300px) translateZ(0) skew(-50deg); transform-origin: center center; }
&.loaded-img { transform: translateX(0);
img:first-child { transform: translateX(0); opacity: 1; }
}
}
.reda-gallery-item {
.img-wrapper { transform: translateX(-50px);
img:first-child { transform: translateX(100px) translateZ(0); }
&.loaded-img { transform: translateX(0);
img:first-child { transform: translateX(0); }
}
}
}
.img-bg-wrapper { display: block; position: relative; z-index: 1; overflow:hidden; transform-origin: 50% 50%;
transform: translateX(-200px) skew(50deg); overflow: hidden; transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
.img-bg-inner { height: 100%; width: 100%; display: block; transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) , transform 1s cubic-bezier(0.77, 0, 0.175, 1); opacity: 0; transform: translateX(300px) translateZ(0) skew(-50deg); transform-origin: center center; position: absolute; top: 0; }
&.img-bg-loaded { transform: translateX(0);
.img-bg-inner { transform: translateX(0); opacity: 1; }
}
}
.mosaic-item { display: block; position: relative; z-index: 1; overflow:hidden; transform-origin: 50% 50%;
transform: translateX(-200px); overflow: hidden; transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
.mosaic-link { height: 100%; width: 100%; display: block; transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) , transform 1s cubic-bezier(0.77, 0, 0.175, 1); opacity: 0; transform: translateX(300px) translateZ(0); transform-origin: center center; }
&.mosaic-loaded { transform: translateX(0);
.mosaic-link { transform: translateX(0); opacity: 1; }
}
}
.animate-text { transition: transform .7s 0s cubic-bezier(0.77, 0, 0.175, 1), opacity .7s 0s; transform: translateY(-30px); opacity: 0;
&.loaded-text { transform: translateY(0); opacity: 1; }
&.animate-second { transition-delay: 0.5s; }
}
.no-anim-images {
.img-wrapper { transform: none !important;
&:after { margin-right: 0; right: -3px; bottom: 0; left: 100%; }
img:first-child { transform: translateX(0); opacity: 1; }
.gallery-icon { opacity: 1; }
}
.mosaic-item {
&:after { margin-right: 0; right: -3px; bottom: 0; left: 100%; }
.mosaic-link { transform: translateX(0); opacity: 1; }
}
.img-bg-wrapper { opacity: 1 !important; transform: none !important;
.img-bg-inner { opacity: 1 !important; transform: none !important; }
}
}
.no-anim-text {
.animate-text { transform: translateY(0); opacity: 1; }
}