Image widget – image text overlay
-
Firstly, love the plugin because it’s so flexible!
I am using the Image widget to create a grid of portfolio images. I was able to make the Title text appear above the image as an overlay but it seems to have taken away the link to the Destination URL I specified (or it’s sitting behind the overlay). I would like to be able to link each image to the URL I select in the widget, as it normally would.
Here is my CSS:
#pl-471 .panel-grid-cell .so-panel:last-child { position: relative; } #pg-471-1 h2, #pg-471-2 h2 { position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; padding-top: 50%; margin-top: 0px; margin-bottom: 0px; background: rgba(255, 255, 255, 0.97); opacity: 0; text-align: center; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; font-family: Raleway; line-height: 18px; font-weight: 800; font-style: normal; font-size: 18px; color: #777777; letter-spacing: 1.2px; text-transform: uppercase; } #pg-471-1 h2:hover, #pg-471-2 h2:hover { opacity: 1; visibility: visible; } .panel-grid-cell .widget-title { display: none; }
My website is https://www.donatomagi.com.
Your advice would be greatly appreciated!
- The topic ‘Image widget – image text overlay’ is closed to new replies.