PO Box 9406, Group 13, Sangkat 4, OU 5, Sihanoukville, Sihanouk Province, 18204 Cambodia
donboscocf.cambodia@gmail.com Mobile: +855 12 919 834 or +855 15 919 834

Create an image overlay, which comes in different styles.

Usage

This component can be applied to an image, an anchor or text. Just add the .uk-overlay to a container element and the .uk-overlay-area class to a <div> to create the overlay itself.

Example

Markup

<!-- This is a div with an overlay -->
<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-area"></div>
</div>

<!-- This is an anchor with an overlay -->
<a class="uk-overlay" href="">
    <img src="" alt="">
    <div class="uk-overlay-area"></div>
</a>

Overlay area content

By default, the overlay displays an icon. But you can also enter your own content, like text or a button. Just add the .uk-overlay-area-content class to a <div> element inside the overlay area.

Example

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-area">
        <div class="uk-overlay-area-content">...</div>
    </div>
</div>

Overlay toggle

To toggle the overlay by hovering the area around it, like a caption for example, just add the .uk-overlay-toggle class.

Example

Caption

Markup

<figure class="uk-overlay-toggle">
    <div class="uk-overlay">
        <img src="" alt="">
        <div class="uk-overlay-area"></div>
    </div>
    <figcaption>...</figcaption>
</figure>

Overlay caption

Add the .uk-overlay-caption class to create an overlay with a text caption.

Example

Some text
Some text

Markup

<!-- This is a div with an overlay caption -->
<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-caption">...</div>
</div>

<!-- This is an anchor with an overlay caption -->
<a class="uk-overlay" href="">
    <img src="" alt="">
    <div class="uk-overlay-caption">...</div>
</a>

Overlay with thumbnails

You can also apply an overlay to a thumbnail from the Thumbnail component. To toggle the overlay by hovering the thumbnail’s caption or frame, just add the .uk-overlay-toggle class.

Example

Markup

<a class="uk-thumbnail uk-overlay-toggle" href="">
    <div class="uk-overlay">
        <img src="" alt="">
        <div class="uk-overlay-caption">...</div>
    </div>
</a>

Testimonials

  • Working in Don Bosco Technical school has been an absolute pleasure so far. Being welcomed completely by the community means it only took me two months to call Sihanoukville home. Teaching English to the students here has never once been

    Elena Arellano-Templer
  • The work I have done with Don Bosco, both with teaching and helping with the Children Fund has been all too rewarding

    Maryam Mohamed
  • I am really happy to be here, because I can help poor children who want to study. Although, I cannot help them directly I feel them in my heart. Sometimes the work is hard, but I love it! 

    Pech Chanmey
  • I feel very honored to be part of Don Bosco Children Fund Cambodia. I want to help and encourage the young people of Cambodia to keep studying and to keep going for their dreams.

    Penh Sokkheng
  • Hello! I am Teacher Gary from Brisbane, Australia. I previously taught English in China and Vietnam. Now I’m pleased to be in Cambodia as a volunteer teacher at Don Bosco Sihanoukville since June 2017. It is a pleasure teaching at

    Gary Briggs

Subscribe to our newsletter

Loading
logoDon Bosco Children Fund

It is a special project of the Don Bosco Foundation of Cambodia which was opened in 1992 to outreach and care to children from disadvantage communities and orphans. It grants scholarship to poor children and is supported by international sponsors.

BRANCHES IN CAMBODIA