diff --git a/assets/animations/frontblocks-animation-option.js b/assets/animations/frontblocks-animation-option.js
index 48625e7..a1954d0 100644
--- a/assets/animations/frontblocks-animation-option.js
+++ b/assets/animations/frontblocks-animation-option.js
@@ -414,7 +414,11 @@ function addAnimationControls(BlockEdit) {
_props$attributes$frb7 = _props$attributes.frblGlassEffect,
frblGlassEffect = _props$attributes$frb7 === void 0 ? false : _props$attributes$frb7,
_props$attributes$frb8 = _props$attributes.frblGlassBlur,
- frblGlassBlur = _props$attributes$frb8 === void 0 ? 10 : _props$attributes$frb8;
+ frblGlassBlur = _props$attributes$frb8 === void 0 ? 10 : _props$attributes$frb8,
+ _props$attributes$frb9 = _props$attributes.frblHoverBgScale,
+ frblHoverBgScale = _props$attributes$frb9 === void 0 ? false : _props$attributes$frb9,
+ _props$attributes$frb0 = _props$attributes.frblHoverBgScaleAmount,
+ frblHoverBgScaleAmount = _props$attributes$frb0 === void 0 ? 1.1 : _props$attributes$frb0;
// Create flattened options for the SelectControl
var flattenedOptions = createFlattenedOptions();
@@ -728,6 +732,30 @@ function addAnimationControls(BlockEdit) {
min: 0,
max: 50,
step: 1
+ })), /*#__PURE__*/React.createElement(PanelBody, {
+ title: __('FrontBlocks Hover Effects', 'frontblocks'),
+ initialOpen: false
+ }, /*#__PURE__*/React.createElement(ToggleControl, {
+ label: __('FrontBlocks: Scale Background on Hover', 'frontblocks'),
+ help: __('Scales the background image when hovering (FrontBlocks Hover Effect). Works with inline background images (--inline-bg-image) and standard CSS backgrounds.', 'frontblocks'),
+ checked: frblHoverBgScale,
+ onChange: function onChange(value) {
+ return props.setAttributes({
+ frblHoverBgScale: value
+ });
+ }
+ }), frblHoverBgScale && /*#__PURE__*/React.createElement(RangeControl, {
+ label: __('Scale Amount', 'frontblocks'),
+ help: __('How much to scale the background image (1.0 = no scale, 1.1 = 110%, 1.5 = 150%)', 'frontblocks'),
+ value: frblHoverBgScaleAmount,
+ onChange: function onChange(value) {
+ return props.setAttributes({
+ frblHoverBgScaleAmount: value
+ });
+ },
+ min: 1.0,
+ max: 2.0,
+ step: 0.05
}))));
};
}
@@ -747,7 +775,11 @@ addFilter('blocks.getSaveContent.extraProps', 'frontblocks/apply-animations', fu
_attributes$frblGlass = attributes.frblGlassEffect,
frblGlassEffect = _attributes$frblGlass === void 0 ? false : _attributes$frblGlass,
_attributes$frblGlass2 = attributes.frblGlassBlur,
- frblGlassBlur = _attributes$frblGlass2 === void 0 ? 10 : _attributes$frblGlass2;
+ frblGlassBlur = _attributes$frblGlass2 === void 0 ? 10 : _attributes$frblGlass2,
+ _attributes$frblHover = attributes.frblHoverBgScale,
+ frblHoverBgScale = _attributes$frblHover === void 0 ? false : _attributes$frblHover,
+ _attributes$frblHover2 = attributes.frblHoverBgScaleAmount,
+ frblHoverBgScaleAmount = _attributes$frblHover2 === void 0 ? 1.1 : _attributes$frblHover2;
// Add style attribute if needed
if (!props.style) {
@@ -788,5 +820,14 @@ addFilter('blocks.getSaveContent.extraProps', 'frontblocks/apply-animations', fu
props.style['backdropFilter'] = "blur(".concat(frblGlassBlur, "px)");
props.style['-webkit-backdrop-filter'] = "blur(".concat(frblGlassBlur, "px)");
}
+
+ // Handle hover background scale
+ if (frblHoverBgScale) {
+ var hoverBgScaleClass = 'frbl-hover-bg-scale';
+ props.className = props.className ? "".concat(props.className, " ").concat(hoverBgScaleClass) : hoverBgScaleClass;
+
+ // Add hover scale amount as CSS variable
+ props.style['--frbl-hover-scale'] = frblHoverBgScaleAmount;
+ }
return props;
});
diff --git a/assets/animations/frontblocks-animation-option.jsx b/assets/animations/frontblocks-animation-option.jsx
index ac1999a..09441db 100644
--- a/assets/animations/frontblocks-animation-option.jsx
+++ b/assets/animations/frontblocks-animation-option.jsx
@@ -236,6 +236,8 @@ function addAnimationControls(BlockEdit) {
frblDisableAnimationMobile = false,
frblGlassEffect = false,
frblGlassBlur = 10,
+ frblHoverBgScale = false,
+ frblHoverBgScaleAmount = 1.1,
} = props.attributes;
// Create flattened options for the SelectControl
@@ -555,6 +557,30 @@ function addAnimationControls(BlockEdit) {
/>
)}
+
+
+ props.setAttributes({ frblHoverBgScale: value })}
+ />
+
+ {frblHoverBgScale && (
+ props.setAttributes({ frblHoverBgScaleAmount: value })}
+ min={1.0}
+ max={2.0}
+ step={0.05}
+ />
+ )}
+
);
@@ -582,6 +608,8 @@ addFilter(
frblDisableAnimationMobile = false,
frblGlassEffect = false,
frblGlassBlur = 10,
+ frblHoverBgScale = false,
+ frblHoverBgScaleAmount = 1.1,
} = attributes;
// Add style attribute if needed
@@ -631,6 +659,17 @@ addFilter(
props.style['-webkit-backdrop-filter'] = `blur(${frblGlassBlur}px)`;
}
+ // Handle hover background scale
+ if (frblHoverBgScale) {
+ const hoverBgScaleClass = 'frbl-hover-bg-scale';
+ props.className = props.className ?
+ `${props.className} ${hoverBgScaleClass}` :
+ hoverBgScaleClass;
+
+ // Add hover scale amount as CSS variable
+ props.style['--frbl-hover-scale'] = frblHoverBgScaleAmount;
+ }
+
return props;
}
);
\ No newline at end of file
diff --git a/assets/animations/frontblocks-animations.css b/assets/animations/frontblocks-animations.css
index 878d727..4af605e 100644
--- a/assets/animations/frontblocks-animations.css
+++ b/assets/animations/frontblocks-animations.css
@@ -26,4 +26,56 @@
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15) !important;
+}
+
+/* FrontBlocks: Hover Background Image Scale Effect */
+.frbl-hover-bg-scale {
+ position: relative;
+ overflow: hidden;
+}
+
+/* For elements with --inline-bg-image variable (like GB Query Loop) */
+.frbl-hover-bg-scale[style*="--inline-bg-image"]::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image: var(--inline-bg-image);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ transition: transform 0.4s ease-in-out;
+ z-index: 0;
+}
+
+/* For elements with regular background-image */
+.frbl-hover-bg-scale:not([style*="--inline-bg-image"])::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image: inherit;
+ background-size: inherit;
+ background-position: inherit;
+ background-repeat: inherit;
+ transition: transform 0.4s ease-in-out;
+ z-index: 0;
+}
+
+/* Hide original background on element with --inline-bg-image */
+.frbl-hover-bg-scale[style*="--inline-bg-image"] {
+ background-image: none !important;
+}
+
+.frbl-hover-bg-scale:hover::before {
+ transform: scale(var(--frbl-hover-scale, 1.1));
+}
+
+.frbl-hover-bg-scale > * {
+ position: relative;
+ z-index: 1;
}
\ No newline at end of file
diff --git a/docs/HOVER-BG-SCALE.md b/docs/HOVER-BG-SCALE.md
new file mode 100644
index 0000000..71a0b23
--- /dev/null
+++ b/docs/HOVER-BG-SCALE.md
@@ -0,0 +1,314 @@
+# FrontBlocks: Hover Background Scale Effect
+
+**Plugin:** FrontBlocks for GeneratePress
+**Feature:** Hover Background Image Scale Effect
+**Version:** 1.0
+**Date:** 2026-01-21
+
+---
+
+## 🎯 Overview
+
+**FrontBlocks Hover Effect** añade un efecto de zoom suave a las imágenes de fondo cuando el usuario hace hover sobre el elemento. Es especialmente útil para galerías, grids de posts, y cualquier diseño que use imágenes de fondo.
+
+Esta funcionalidad forma parte del conjunto de herramientas de animación y efectos de **FrontBlocks**, diseñada específicamente para trabajar de forma nativa con GenerateBlocks.
+
+---
+
+## ✨ Características
+
+- **Zoom configurable**: Ajusta el nivel de escala desde 1.0 hasta 2.0
+- **Transición suave**: Animación de 0.4 segundos con ease-in-out
+- **Compatible con GenerateBlocks**: Funciona perfectamente con Query Loops y `--inline-bg-image`
+- **Compatible con background-image estándar**: También funciona con CSS background-image normal
+- **Sin interferencia con contenido**: El contenido del elemento permanece sobre la imagen escalada
+
+---
+
+## 📋 Cómo Usar FrontBlocks Hover Effect
+
+### 1. Activar el Efecto
+
+1. Selecciona cualquier bloque en el editor de Gutenberg
+2. Abre el panel de configuración del bloque (sidebar derecho)
+3. Busca el panel **"Hover Effects"** (añadido por FrontBlocks)
+4. Activa el toggle **"Scale Background Image on Hover"**
+
+### 2. Ajustar la Escala
+
+Usa el slider **"Scale Amount"** para controlar cuánto se escalará la imagen:
+
+- **1.0** = Sin escala (no se nota cambio)
+- **1.1** = 110% (zoom sutil, recomendado por defecto)
+- **1.2** = 120% (zoom moderado)
+- **1.5** = 150% (zoom pronunciado)
+- **2.0** = 200% (zoom máximo)
+
+### 3. Aplicar a tu Contenido
+
+El efecto funciona automáticamente en:
+
+- Bloques con `--inline-bg-image` (como GenerateBlocks Query Loop)
+- Bloques con `background-image` CSS estándar
+- Cualquier elemento que tenga una imagen de fondo
+
+---
+
+## 💡 Ejemplo Práctico: Query Loop con Posts
+
+Este es el caso de uso más común con **GenerateBlocks + FrontBlocks**:
+
+```html
+
+
+```
+
+**¿Qué hace FrontBlocks?**
+
+1. Detecta el elemento con clase `frbl-hover-bg-scale`
+2. Crea un pseudo-elemento `::before` con la imagen de fondo
+3. Al hacer hover, aplica `transform: scale(1.1)` al pseudo-elemento
+4. El contenido (título y enlace) permanece en su posición original
+
+---
+
+## 🎨 CSS Generado por FrontBlocks
+
+Cuando activas **FrontBlocks Hover Effect**, el plugin añade automáticamente estas clases CSS con el prefijo `.frbl-` (FrontBlocks):
+
+### Clases CSS
+
+```css
+.frbl-hover-bg-scale {
+ position: relative;
+ overflow: hidden; /* Evita que la imagen escalada se salga */
+}
+```
+
+### Pseudo-elemento para la Imagen
+
+```css
+.frbl-hover-bg-scale[style*="--inline-bg-image"]::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image: var(--inline-bg-image);
+ background-size: cover;
+ background-position: center;
+ transition: transform 0.4s ease-in-out;
+ z-index: 0;
+}
+```
+
+### Efecto Hover
+
+```css
+.frbl-hover-bg-scale:hover::before {
+ transform: scale(var(--frbl-hover-scale, 1.1));
+}
+```
+
+### Contenido sobre la Imagen
+
+```css
+.frbl-hover-bg-scale > * {
+ position: relative;
+ z-index: 1; /* Mantiene el contenido visible sobre la imagen */
+}
+```
+
+---
+
+## 🔧 Implementación Técnica de FrontBlocks
+
+### Archivos del Plugin FrontBlocks
+
+1. **`includes/Frontend/Animations.php`**
+ - Añadidos atributos `frblHoverBgScale` y `frblHoverBgScaleAmount`
+ - Lógica para detectar y aplicar el efecto en el frontend
+ - Inyección de variable CSS `--frbl-hover-scale`
+ - Prefijo `frbl` identifica funcionalidades de FrontBlocks
+
+2. **`assets/animations/frontblocks-animation-option.jsx`**
+ - Nuevo panel "Hover Effects" en el editor de bloques
+ - ToggleControl para activar/desactivar
+ - RangeControl para ajustar la escala
+ - Integrado en el módulo de animaciones de FrontBlocks
+
+3. **`assets/animations/frontblocks-animations.css`**
+ - Estilos CSS con clase `.frbl-hover-bg-scale`
+ - Compatible con `--inline-bg-image` (GenerateBlocks)
+ - Compatible con `background-image` estándar
+
+---
+
+## 🎯 Casos de Uso Comunes
+
+### 1. Galería de Proyectos
+
+Aplica el efecto a cada elemento del loop:
+
+```
+Query Loop Block
+└── Container (frbl-hover-bg-scale activado)
+ ├── Background Image (--inline-bg-image)
+ ├── Título
+ └── Descripción
+```
+
+### 2. Grid de Posts
+
+Añade dinamismo a tu blog:
+
+```
+Posts Grid
+└── Post Card (frbl-hover-bg-scale activado, escala 1.15)
+ ├── Featured Image como background
+ ├── Categoría
+ ├── Título
+ └── Extracto
+```
+
+### 3. Sección Hero
+
+Efecto sutil en banners:
+
+```
+Hero Section (frbl-hover-bg-scale activado, escala 1.05)
+├── Background Image
+├── Heading
+└── CTA Button
+```
+
+---
+
+## ⚙️ Opciones de Configuración
+
+| Opción | Tipo | Rango | Por Defecto | Descripción |
+|--------|------|-------|-------------|-------------|
+| **Scale Background Image on Hover** | Toggle | On/Off | Off | Activa el efecto de zoom |
+| **Scale Amount** | Slider | 1.0 - 2.0 | 1.1 | Cantidad de zoom (1.1 = 110%) |
+
+---
+
+## 🚀 Mejores Prácticas
+
+### Valores Recomendados por Tipo de Contenido
+
+- **Galerías pequeñas** (< 300px): Scale 1.1 - 1.15
+- **Cards medianas** (300-500px): Scale 1.1 - 1.2
+- **Hero sections** (> 500px): Scale 1.05 - 1.1
+- **Imágenes grandes** (fullscreen): Scale 1.05
+
+### Consideraciones de Rendimiento
+
+- ✅ Usa `transform: scale()` (GPU-accelerated)
+- ✅ Transición suave de 0.4s (no afecta rendimiento)
+- ✅ Usa `overflow: hidden` para evitar reflows
+- ✅ Compatible con cualquier tamaño de imagen
+
+### Accesibilidad
+
+- ✅ El efecto solo se aplica en hover (no interfiere con navegación por teclado)
+- ✅ El contenido permanece legible durante el efecto
+- ✅ No afecta el contraste de color
+
+---
+
+## 🐛 Troubleshooting
+
+### El efecto no funciona
+
+1. **Verifica que el elemento tenga una imagen de fondo**
+ - Debe tener `background-image` CSS o `--inline-bg-image`
+
+2. **Comprueba que el toggle esté activado**
+ - Panel "Hover Effects" → "Scale Background Image on Hover"
+
+3. **Asegúrate de que el bloque se guardó correctamente**
+ - Guarda el post/página después de activar el efecto
+
+### La imagen no se ve
+
+1. **Verifica el z-index del contenido**
+ - El plugin automáticamente pone el contenido con `z-index: 1`
+
+2. **Comprueba que no hay conflictos CSS**
+ - Algunos themes pueden sobrescribir los estilos
+
+### El efecto es demasiado rápido/lento
+
+Actualmente la duración es fija (0.4s). Si necesitas personalizarlo, añade CSS personalizado:
+
+```css
+.frbl-hover-bg-scale::before {
+ transition-duration: 0.6s !important; /* Más lento */
+}
+```
+
+---
+
+## 📝 Changelog de FrontBlocks Hover Effect
+
+### v1.0 (2026-01-21)
+
+- ✨ Lanzamiento inicial de **FrontBlocks Hover Effect**
+- ✨ Soporte nativo para `--inline-bg-image` (GenerateBlocks)
+- ✨ Soporte para `background-image` CSS estándar
+- ✨ Control configurable de escala (1.0 - 2.0)
+- ✨ Integración completa con panel de Animations de FrontBlocks
+- ✨ Prefijo `.frbl-` para todas las clases CSS
+- ✨ Compatible con GeneratePress y GenerateBlocks
+
+---
+
+## 🔮 Próximas Mejoras
+
+Ideas para futuras versiones:
+
+- [ ] Duración de transición configurable
+- [ ] Diferentes tipos de easing (ease, linear, bounce)
+- [ ] Efecto de zoom en diferentes direcciones
+- [ ] Combinación con efectos de overlay
+- [ ] Animación al entrar en viewport (scroll)
+
+---
+
+## 💬 Soporte FrontBlocks
+
+Si tienes problemas o sugerencias sobre **FrontBlocks Hover Effect**:
+
+- **Plugin**: FrontBlocks for GeneratePress
+- **Email**: info@close.technology
+- **Web**: https://close.technology
+- **Documentación**: https://close.technology/wordpress-plugins/frontblocks/
+- **WordPress.org**: https://wordpress.org/plugins/frontblocks/
+
+---
+
+## 📄 Licencia
+
+GPL-2.0+ (Open Source)
+
+---
+
+## 🏷️ Sobre FrontBlocks
+
+**FrontBlocks** es un plugin gratuito desarrollado por **Close·technology** que extiende las capacidades de GeneratePress y GenerateBlocks, añadiendo funcionalidades avanzadas como:
+
+- ✨ Animaciones y efectos visuales
+- 🎨 Efectos de hover personalizables
+- 🎯 Herramientas para Query Loops
+- 🔧 Utilidades para desarrollo web moderno
+
+---
+
+**¡Disfruta creando efectos increíbles con FrontBlocks!** 🎉
diff --git a/includes/Frontend/Animations.php b/includes/Frontend/Animations.php
index b731edb..27350fd 100644
--- a/includes/Frontend/Animations.php
+++ b/includes/Frontend/Animations.php
@@ -164,6 +164,14 @@ function( settings, name ) {
frblGlassBlur: {
type: 'number',
default: 10
+ },
+ frblHoverBgScale: {
+ type: 'boolean',
+ default: false
+ },
+ frblHoverBgScaleAmount: {
+ type: 'number',
+ default: 1.1
}
};
} catch( error ) {
@@ -191,11 +199,12 @@ public function add_animation_classes_to_blocks( $block_content, $block ) {
$attrs = $block['attrs'];
- // Check if either animation or glass effect is set.
- $has_animation = isset( $attrs['frblAnimation'] ) && ! empty( $attrs['frblAnimation'] );
- $has_glass_effect = isset( $attrs['frblGlassEffect'] ) && $attrs['frblGlassEffect'];
+ // Check if either animation, glass effect or hover bg scale is set.
+ $has_animation = isset( $attrs['frblAnimation'] ) && ! empty( $attrs['frblAnimation'] );
+ $has_glass_effect = isset( $attrs['frblGlassEffect'] ) && $attrs['frblGlassEffect'];
+ $has_hover_bg_scale = isset( $attrs['frblHoverBgScale'] ) && $attrs['frblHoverBgScale'];
- if ( ! $has_animation && ! $has_glass_effect ) {
+ if ( ! $has_animation && ! $has_glass_effect && ! $has_hover_bg_scale ) {
return $block_content;
}
@@ -223,6 +232,12 @@ public function add_animation_classes_to_blocks( $block_content, $block ) {
$properties['glass_blur'] = isset( $attrs['frblGlassBlur'] ) ? $attrs['frblGlassBlur'] : 10;
}
+ // Hover background scale properties.
+ if ( $has_hover_bg_scale ) {
+ $properties['hover_bg_scale'] = true;
+ $properties['hover_bg_scale_amount'] = isset( $attrs['frblHoverBgScaleAmount'] ) ? $attrs['frblHoverBgScaleAmount'] : 1.1;
+ }
+
// Build style attributes.
$style_attr = '';
@@ -250,10 +265,16 @@ public function add_animation_classes_to_blocks( $block_content, $block ) {
$style_attr .= '-webkit-backdrop-filter:blur(' . esc_attr( $blur_value ) . 'px);';
}
+ // Hover background scale styles.
+ if ( $has_hover_bg_scale ) {
+ $scale_amount = $properties['hover_bg_scale_amount'];
+ $style_attr .= '--frbl-hover-scale:' . esc_attr( $scale_amount ) . ';';
+ }
+
// Add animation classes and styles to the first HTML tag.
$block_content = preg_replace_callback(
'/^<([a-z][a-z0-9]*)\s*((?:[^>]|\\n)*?)(?:style="([^"]*?)")?([^>]*?)>/i',
- function ( $matches ) use ( $properties, $style_attr, $has_animation, $has_glass_effect ) {
+ function ( $matches ) use ( $properties, $style_attr, $has_animation, $has_glass_effect, $has_hover_bg_scale ) {
$tag = $matches[1] ?? 'div';
$beginning = $matches[2] ?? '';
$existing_style = $matches[3] ?? '';
@@ -275,6 +296,11 @@ function ( $matches ) use ( $properties, $style_attr, $has_animation, $has_glass
$classes .= ( ! empty( $classes ) ? ' ' : '' ) . 'frbl-glass-effect';
}
+ // Add hover background scale class.
+ if ( $has_hover_bg_scale ) {
+ $classes .= ( ! empty( $classes ) ? ' ' : '' ) . 'frbl-hover-bg-scale';
+ }
+
// Add classes to existing class attribute or create new one.
if ( ! empty( $classes ) ) {
if ( strpos( $beginning . $ending, 'class="' ) !== false ) {
@@ -303,6 +329,11 @@ function ( $matches ) use ( $properties, $style_attr, $has_animation, $has_glass
$beginning .= ' data-frontblocks-glass-blur="' . esc_attr( $properties['glass_blur'] ) . '"';
}
+ // Add hover background scale data attributes.
+ if ( $has_hover_bg_scale ) {
+ $beginning .= ' data-frontblocks-hover-scale="' . esc_attr( $properties['hover_bg_scale_amount'] ) . '"';
+ }
+
// Add styles if needed.
if ( ! empty( $style_attr ) ) {
$combined_style = $existing_style . ( ! empty( $existing_style ) ? ';' : '' ) . $style_attr;
diff --git a/readme.md b/readme.md
index 7b2baa9..0e261f9 100644
--- a/readme.md
+++ b/readme.md
@@ -10,6 +10,7 @@ Repository for WordPress Plugin that add features to GeneratePress blocks ( Gene
### Block Enhancements
- Animations
- Container Effects (Glass Effect / Glassmorphism)
+- **FrontBlocks Hover Effects** - Smooth background image zoom on hover with configurable scale
- Carousel/Slider
- Native Gallery
- Sticky Columns
@@ -55,6 +56,7 @@ Repository for WordPress Plugin that add features to GeneratePress blocks ( Gene
## Documentation
- [Container Edge Alignment](./docs/CONTAINER-EDGE-ALIGNMENT.md) - Create asymmetric layouts with edge-to-edge content
+- [FrontBlocks Hover Effects](./docs/HOVER-BG-SCALE.md) - Smooth background image zoom effect on hover
- [Full Page Scroll](./docs/FULLPAGE-SCROLL.md) - Smooth fullpage scroll with navigation
- [Full Page Implementation](./docs/FULLPAGE-IMPLEMENTATION-SUMMARY.md) - Technical implementation details
- [Changelog Full Page](./docs/CHANGELOG-FULLPAGE.md) - Full Page feature changelog
diff --git a/readme.txt b/readme.txt
index 9faf55b..7d45464 100644
--- a/readme.txt
+++ b/readme.txt
@@ -43,6 +43,15 @@ The animations are based on [Animate.css](https://animate.style/): Attention see
**Container Effects**
Apply glassmorphism effects to any block with customizable blur intensity. In the block settings, open the 'Container Effects' panel to enable the glass effect and adjust the blur level (0-50px) for a modern, frosted glass appearance. The effect includes a semi-transparent background, subtle border, and soft shadow, creating a beautiful layered design. Perfect for hero sections, cards, and overlays.
+**FrontBlocks Hover Effects**
+Add smooth zoom effects to background images when users hover over elements. Perfect for post grids, galleries, and cards. In the block settings, open the 'FrontBlocks Hover Effects' panel to enable background scaling. Features:
+- Compatible with GenerateBlocks Query Loop (--inline-bg-image)
+- Works with standard CSS background-image
+- Configurable scale amount from 1.0 to 2.0 (default: 1.1 for 110% zoom)
+- Smooth 0.4s transition with GPU acceleration
+- Content remains readable and properly positioned above the scaled image
+- Overflow protection ensures images don't extend beyond container
+
**Sticky option for Grid block:**
The sticky option allows you to make the grid block stick to the top of the viewport when scrolling down. To use this feature, enable the "Sticky" option in the Grid block settings. When enabled, the grid block will remain fixed at the top of the viewport as you scroll down the page.
@@ -142,6 +151,10 @@ More information in the [FrontBlocks PRO](https://close.technology/en/wordpress-
== Changelog ==
== n.e.x.t ==
+* Added: FrontBlocks Hover Effects - Smooth background image zoom on hover for Query Loops, grids, and cards.
+* Added: Configurable scale amount (1.0-2.0) for hover background zoom effect.
+* Added: Support for GenerateBlocks --inline-bg-image and standard CSS background-image.
+* Added: GPU-accelerated smooth transitions (0.4s) for optimal performance.
* Improved: Increased carousel bullet size from 9px to 13px for better accessibility and easier interaction.
* Improved: Updated carousel bullets spacing using CSS gap property for more consistent layout.
* Added: Fluid Typography - Automatically converts GeneratePress typography to smooth fluid scaling using CSS clamp().