Content Widget Text Overlay

Asked on June 22, 2016 in Customization.

Hello,

I have been following your very helpful how to tutorial on how to add text over a background image in a content widget at the following link:

https://docs.layerswp.com/doc/how-to-overlay-images-with-text-or-links-in-the-content-widget/

Now, I have managed to get the text showing over the image, however I seem to be having some trouble getting the Hover part of it to work.

I have placed the following code into the advance section of the widget and given it the custom class of content-overlay but the text seems to be fixed in position and does not appear or disappear on hover:


.content-overlay .column{min-height: 300px;}

.content-overlay .media .media-body{padding: 25% 10% 10% 10%;}

.content-overlay .column{

transition: 1s ease-in-out;

}

.content-overlay .column:hover{

-webkit-transform: scale(.95);

-moz-transform: scale(.95);

-o-transform: scale(.95);

-ms-transform: scale(.95);

transform: scale(.95);

}

I know there must be something I’m missing, so any help would be greatly appreciated.

Thanks.

Rickerby Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on June 28, 2016.

    The original tutorial is written for static text over a background image. If you are trying to get text to appear on hover, you need to set the content of the media-body to hidden or 0 opacity, then reverse it on hover. Please note this is not going to work like the post widget because there is no actual overlay element in the Content widget.
    Using the custom class from the example:

    .content-overlay-short .media .media-body{
    opacity: 0;
    transition: all ease-in-out .3s;
    }
    .content-overlay-short .column:hover .media-body{
    opacity: 1;
    }

    The above is in theory, I have not tested it.

    Thank you  for the code Vail Joy. You are correct. It allows for the text to appear on hover, which is fantastic, however I do notice that the gutter has to be on for the effect to work.

    Thanks once again for your help, it is greatly appreciated. Now to get the overlay working.

    On a side note could, the custom post type “portfolio”, activated in the writing settings be used in the post widget to cobble together a rudimentary image gallery with a hover property?

    on June 30, 2016.
    Reply