Add Unveil Effect to Image

templaza · Sep 26, 2024 · 18a5b17 · 18a5b17
1 parent b6e019b
commit 18a5b17
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 0 deletions.
diff --git a/assets/vendor/astroid/scss/utilities/_animations.scss b/assets/vendor/astroid/scss/utilities/_animations.scss
@@ -599,6 +599,62 @@
 	}
 }
 
+.as-effect-unveil {
+	position: relative;
+	overflow: hidden;
+	> img {
+		transition: opacity 0.35s, transform 0.35s, filter 0.35s;
+	}
+	&:before {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 50%;
+		height: 130%;
+		border-right: 1px solid rgba(255, 255, 255, 0);
+		content: "";
+		opacity: 0.5;
+		transform-origin: top right;
+		transition: opacity 0.35s, transform 0.35s;
+		background: rgba(0, 0, 0, 0.1);
+		z-index: 1
+	}
+	&:after {
+		position: absolute;
+		top: 0;
+		left: 50%;
+		width: 50%;
+		height: 130%;
+		border-left: 1px solid rgba(255, 255, 255, 0);
+		content: "";
+		opacity: 0.5;
+		transform-origin: top left;
+		transition: opacity 0.35s, transform 0.35s;
+		background: rgba(0, 0, 0, 0.1);
+		z-index: 1
+	}
+	&:hover {
+		&:before {
+			border-radius: 0 0 120%;
+			border-right-color: rgba(255, 255, 255, 0.75);
+			transform: rotate(35deg);
+		}
+		&:after {
+			border-radius: 0 0 0 120%;
+			border-left-color: rgba(255, 255, 255, 0.75);
+			transform: rotate(-35deg);
+		}
+		> img {
+			opacity: 0.9;
+			filter: brightness(100%) contrast(113%) saturate(159%) blur(0.2px) hue-rotate(0deg);
+			-webkit-transform: scale3d(1.05, 1.05, 1);
+			-moz-transform: scale3d(1.05, 1.05, 1);
+			-ms-transform: scale3d(1.05, 1.05, 1);
+			transform: scale3d(1.05, 1.05, 1);
+		}
+	}
+}
+
 @-webkit-keyframes fadeInOpacity {
 	0% {
 		opacity: 0;

diff --git a/framework/elements/grid/grid.xml b/framework/elements/grid/grid.xml
@@ -468,6 +468,7 @@
                     <option value="">TPL_ASTROID_DEFAULT</option>
                     <option value="light-up">ASTROID_WIDGET_EFFECT_LIGHT_UP</option>
                     <option value="flash">ASTROID_WIDGET_EFFECT_FLASH</option>
+                    <option value="unveil">ASTROID_WIDGET_EFFECT_UNVEIL</option>
                 </field>
                 <field astroidgroup="image_options" name="hover_transition" type="astroidlist" label="ASTROID_WIDGET_HOVER_TRANSITION_LABEL" default="">
                     <option value="">TPL_ASTROID_DEFAULT</option>

diff --git a/framework/elements/image/image.xml b/framework/elements/image/image.xml
@@ -55,6 +55,7 @@
                     <option value="">TPL_ASTROID_DEFAULT</option>
                     <option value="light-up">ASTROID_WIDGET_EFFECT_LIGHT_UP</option>
                     <option value="flash">ASTROID_WIDGET_EFFECT_FLASH</option>
+                    <option value="unveil">ASTROID_WIDGET_EFFECT_UNVEIL</option>
                 </field>
                 <field astroidgroup="widget_styles" name="hover_transition" type="astroidlist" label="ASTROID_WIDGET_HOVER_TRANSITION_LABEL" default="">
                     <option value="">TPL_ASTROID_DEFAULT</option>

diff --git a/framework/elements/imagegroup/imagegroup.xml b/framework/elements/imagegroup/imagegroup.xml
@@ -242,6 +242,7 @@
                     <option value="">TPL_ASTROID_DEFAULT</option>
                     <option value="light-up">ASTROID_WIDGET_EFFECT_LIGHT_UP</option>
                     <option value="flash">ASTROID_WIDGET_EFFECT_FLASH</option>
+                    <option value="unveil">ASTROID_WIDGET_EFFECT_UNVEIL</option>
                 </field>
                 <field astroidgroup="widget_styles" name="hover_transition" type="astroidlist" label="ASTROID_WIDGET_HOVER_TRANSITION_LABEL" default="">
                     <option value="">TPL_ASTROID_DEFAULT</option>

diff --git a/framework/elements/testimonials/testimonials.xml b/framework/elements/testimonials/testimonials.xml
@@ -404,6 +404,7 @@
                     <option value="">TPL_ASTROID_DEFAULT</option>
                     <option value="light-up">ASTROID_WIDGET_EFFECT_LIGHT_UP</option>
                     <option value="flash">ASTROID_WIDGET_EFFECT_FLASH</option>
+                    <option value="unveil">ASTROID_WIDGET_EFFECT_UNVEIL</option>
                 </field>
                 <field astroidgroup="avatar_options" name="hover_transition" type="astroidlist" label="ASTROID_WIDGET_HOVER_TRANSITION_LABEL" default="">
                     <option value="">TPL_ASTROID_DEFAULT</option>