Extract Grid Style 9 image transform and opacity transitions

- Merge pseudo-element patterns with combined gradient and transition properties
- Add img-specific display, opacity, and transform transitions with cross-browser support
- Include scale3d(1.1) hover transform for enhanced performance
- Apply .pp-content-post-grid parent scoping to prevent global conflicts

Author: pftg

themes/beaver/assets/css/utilities/components/powerpack/content-grid.css

@@ -256,11 +256,11 @@
   transform: scale(1.1);
 }
 
-/* Grid Style 9 Pseudo-element Overlay with Gradient */
+/* Grid Style 9 Pseudo-element Overlay with Gradient and Transitions */
 .pp-content-post-grid .pp-content-post.pp-grid-style-9 .pp-post-featured-img a:last-child:before {
   content: "";
   display: block;
-  height: 70%;
+  height: 100%;
   width: 100%;
   position: absolute;
   bottom: 0;
@@ -272,4 +272,26 @@
   background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .7) 100%);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .7) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#b3000000', GradientType=0);
+  -webkit-transition: background-color .3s ease;
+  -moz-transition: background-color .3s ease;
+  -o-transition: background-color .3s ease;
+  transition: background-color .3s ease;
+}
+
+.pp-content-post-grid .pp-content-post.pp-grid-style-9:hover .pp-post-featured-img a:last-child:before {
+  background-color: rgba(0, 0, 0, .1);
+}
+
+/* Grid Style 9 Image Transform and Opacity */
+.pp-content-post-grid .pp-content-post.pp-grid-style-9 .pp-post-featured-img img {
+  display: block;
+  height: auto;
+  opacity: 1;
+  transition: transform 0.3s ease, opacity 0.3s;
+  -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s;
+  transition-timing-function: ease !important;
+}
+
+.pp-content-post-grid .pp-content-post.pp-grid-style-9:hover .pp-post-featured-img img {
+  transform: scale3d(1.1, 1.1, 1);
 }