Avatar michael.anlauf Online asked

Tutorial, slideshow behind a text mask.

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

Example
http://www.tucfoto.com/index.php/sailing

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
www.tucfoto.com

  • Joomla
  • Widgetkit
  • Tutorial

Edited

4 Answers

0

Avatar david.dahl answered

Is there any way to fade the mask in?

0

Avatar michael.anlauf Online 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

Edited

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