Estendiamo il plugin display posts con la funzione overlay
Un ulteriore upgrade per il plugin plugin Display Post. Il layout Overlay permette di visualizzare le immagini in evidenza come sfondo dell’articolo. Il titolo appare in sovra impressione insieme al sommario.
Quest’ultimo viene nascosto quando ci posizioniamo sopra con il mouse evidenziando il titolo.
Vediamo l’overlay in funzione su codepen.io
See the Pen Dsiplay Post – Overlay grid by Marco Casalegno (@kreatore) on CodePen.
Analizziamo il codice
<div class="dps-overlay">
<div class="dps-overlay-img">
<img src="https://loremflickr.com/1024/576" />
</div>
<div class="dps-overlay-content">
<a href="#"><h2>Lorem ipsum dolor sit amet</h2>
<p>Donec finibus neque at lorem laoreet, sed dictum magna auctor. Mauris a porta tellus. Fusce ut velit id tortor convallis egestas et bibendum justo. </p></a>
</div>Abbiamo utilizzato un contenitore principale a cui assegnamo una classe overlay all’interno del quale troviamo due blocchi.
Uno dedicato all’immagine ed uno dedicato al testo con rispettivamente le stesse classi: overlay-img ed overlay-content.
In questo esempio non sfruttiamo le chiamate presenti in Display Post ma abbiamo del testo fisso.
Integrato in Display Posts
Questa opzione è stata integrata nella versione 1.1.2 del plugin Display Post Layout Extended quindi oltre alle gia presenti Flip, Swipe e Slide, ora è presente anche questo layout.
Per richiamarlo è sufficiente inserirlo all’interno dello ShortCode di Display Post come suggerito dal suo creatore. Quindi la chiamata è come la seguente:
[display-posts layout="overlay"]a cui andranno aggiunti tutti gli altri parametri per estrapolare i valori.