YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar michael.anlauf Support asked

Tutorial, slideshow behind a text mask.

The idea came after Rafal Kossowski ask about a slideshow behind a keyhole.


As mask i use a vector image in svg format, which you can upload with an ftp program since Joomla has a problem to accept this type of file. You can also use a png but because the svg is scaleable without quality loss i thing svg is the better choice.
You can of course use any type of text or graphic.
The way the solution works here is, that always the mask will fill the height or wide of the slideshow without loosing the size ratio.
Also this solution is independent from updates of the Widgetkit.

Here now the code.
Just add the mask to the module like this:

[widgetkit id="9" name="sailing"]<div class="mask" style="background-image: url('images/tucfoto/play/mask.svg');"></div>

In the custom.css add this:

.mask {  
    position: absolute; top: 0px;  
    width: 100%;  
    height: 100%;  
    overflow: hidden;  
    background-size: cover;  
    background-position: center center;  

Regards, Michael

  • Joomla
  • Widgetkit
  • Tutorial


4 Answers


Avatar david.dahl answered

Is there any way to fade the mask in?


Avatar michael.anlauf Support answered

I have to correct my self! Seams that a animation (fade) of the mask comes in conflict with the slideshow animation.
Maybe i check it out a other time.

Regards, Michael tucfoto


Know someone who can answer? Share a link to this question via email or twitter.