[Plugin WordPress] Imágenes que al pasar el mouse expande contenido

Buenas, hoy os traigo un plugin que he desarrollado para una web la cual necesitaba mostrar una imagen con un titulo en la parte inferior izquierda y que al pasar el mouse expandiera un texto o HTML pudiendo tener opción de que al pulsar dicha imagen llevara a otro contenido o web.

Esta última versión ha sido subida al repositorio de WordPress, si tienes la versión antigua instalada elimina esa versión e instala esta, recibirás las actualizaciones directamente en tu WordPress.

Los parámetros han cambiado

Lo puedes descargar desde aquí

Un ejemplo

Titulo de prueba

Este texto aparece cuando pasas el mouse por encima de la imagen, se puede añadir texto, texto con estilo o HTML

Este ejemplo se inserta en cualquier sitio con un shortcode, el siguiente.

			
			
			
Titulo de prueba
			

			Este texto aparece cuando pasas el mouse por encima de la imagen, se puede añadir texto, <strong>texto con estilo</strong> o <button>HTML</button>
			
		
	

El plugin permite que le pasemos parámetros para definir el estilo al marco que contiene la imagen, una URL de la imagen ya sea desde nuestro WordPress o imagen externa, podremos definir un título como en el ejemplo «Titulo de Prueba», un enlace para que al pulsar dentro de la imagen nos dirija a un contenido y un parámetro «esquinas» que si se establece en «si» recortará la esquina superior izquierda y inferior derecha como en el siguiente ejemplo.

Titulo de prueba

Este texto aparece cuando pasas el mouse por encima de la imagen, se puede añadir texto, texto con estilo o HTML

Por lo tanto los parametros son:

• Style = Definimos un estilo para el marco que contiene la imagen por ejemplo width:50%.
• Link = Si contiene un enlace al pulsar encima de la imagen nos dirigirá a dicho URL.
• Image = (Obligatorio) La imagen de fondo del marco.
• Corners = («yes» o «no») para que recorte las esquinas superior izquierda y inferior derecha.
• Text = El titulo inferior izquierdo para poder explicar de que va la imagen.

Estos son los parámetros dentro del shortcode, para el contenido que se muestra al pasar el mouse por encima de la imagen lo declaramos dentro del tag del shortcode.

Y nada más, siéntete libre de compartir modificar o hacer lo que quieras con este plugin 🙂

Eso es todo, espero que os guste y si te parece interesante comparte con tus amigos, si tienes alguna pregunta no dudes en comentar.

Happy Code!