Ayuda para mostrar excerpt al pasar el mouse sobre imagen en WP

[webbber]

hola a todos
Espero no me vuelvan a poner una infraccion por pedir ayuda para un plugin. Esta vez, quiero pedirles ayuda porque he buscado y no encuentro un plugin para mi necesidad.
Tengo un blog de cine donde se muestran las imagenes de los estrenos en la portada del blog en WP, pero no se muestra el excert ni otro texto, solo la galeria de imagenes enlazadas a la entrada individual.
Lo que quiero es que al pasar al mouse sobre la imagen, se muestre el excerpt en el pie de la imagen, como lo hace la publicidad de Image Space Media. No conozco un plugin como este, por lo que solicito de su ayuda

saludos

 

[Carlos Arreola]

hola a todos
Espero no me vuelvan a poner una infraccion por pedir ayuda para un plugin. Esta vez, quiero pedirles ayuda porque he buscado y no encuentro un plugin para mi necesidad.
Tengo un blog de cine donde se muestran las imagenes de los estrenos en la portada del blog en WP, pero no se muestra el excert ni otro texto, solo la galeria de imagenes enlazadas a la entrada individual.
Lo que quiero es que al pasar al mouse sobre la imagen, se muestre el excerpt en el pie de la imagen, como lo hace la publicidad de Image Space Media. No conozco un plugin como este, por lo que solicito de su ayuda

saludos

¡Hola! Entiendo tu necesidad y puedo recomendarte una forma de lograr lo que buscas sin necesidad de un plugin adicional. Puedes lograr este efecto de mostrar el excerpt al pasar el mouse sobre la imagen utilizando código personalizado en tu tema de WordPress.

La forma más sencilla de hacerlo es añadiendo un poco de código CSS y JavaScript a tu tema. Aquí te dejo un ejemplo básico de cómo lograrlo:

1. En tu tema de WordPress, ve al archivo functions.php y añade el siguiente código:

```php
function agregar_efecto_excerpt_a_imagenes() {
?>
<style>
.imagen-con-excerpt {
position: relative;
display: inline-block;
}

.imagen-con-excerpt img {
width: 100%;
height: auto;
}

.imagen-con-excerpt .excerpt-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
display: none;
}
</style>
<script>
jQuery(document).ready(function($) {
$('.imagen-con-excerpt').hover(function() {
$(this).find('.excerpt-overlay').stop().fadeIn();
}, function() {
$(this).find('.excerpt-overlay').stop().fadeOut();
});
});
</script>
<?php
}
add_action('wp_footer', 'agregar_efecto_excerpt_a_imagenes');
```

2. En el archivo de tu tema donde se muestran las imágenes de los estrenos, deberás modificar el código para que las imágenes tengan la clase `imagen-con-excerpt` y agregar un elemento con la clase `excerpt-overlay` que contendrá el excerpt. Por ejemplo:

```php
<div class="imagen-con-excerpt">
<img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen">
<div class="excerpt-overlay">Aquí va el excerpt relacionado con la imagen</div>
</div>
```

Con estos pasos, al pasar el mouse sobre una imagen en tu blog de cine, se mostrará un excerpt relacionado con esa imagen en el pie de la misma. Espero que esta solución te sea de ayuda. ¡Saludos!