December 5, 2014

Weebly Tricks #85 - CSS3 Annotation Overlay Effects

Posted by Domz at 12/05/2014

Annotation Overlay Effects Weebly

Deciding to pursue my work, I jump in on more advance widgets. This is my first tutorial for a true 100% responsive widget. With this jump in, I also created my third demo page using the latest free template from Weebly which is set to be responsive. So our tutorial today is all about placing annotations on template image preview (when your offering templates to your clients) with clean overlay effects.




Just a reminder, I couldn't perfectly apply the original work of Mary Lou on Codrops but this is the best I can provide you for now. It took me some time to fit it on our template. Remember, use a responsive template from Weebly or any other provider to actually see the effects.


FILES NEEDED
How to use these files? Click Here!


HEADER CODE
Where to place these codes? Click Here!


<link href="http://mwtdatabase.weebly.com/files/theme/anovef.css" rel="stylesheet" type="text/css" />

Notes:
Red text - Change with your site address.

Icluded in the CSS file is our magic code from Solving Overflowing Widgets.


BODY CODE
Where to place these codes? Click Here!


<div class="ao-item">
    <div class="ao-preview">
        <input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
        <img src="http://mwtdatabase.weebly.com/files/theme/Anariel_BlentonTemplate.jpg" alt="Anariel Blenton Template" />
        <div class="ao-annotations">
            <span>Full Localisation Support</span>
            <span>Custom Image Widget</span>
            <span>Blog and Contact Widgets</span>
            <span>Easy Theme Options</span>
            <span>4 Footer Widget Columns</span>
        </div>
    </div>
</div>

I deleted some elements which is not necessary to the template, we need to focus on the image. Ok, take note of the following:

Green text - The source of your image.
Blue text - Your image description for SEO purposes.
Yellow text - Your annotations.


CONCLUSION





If you are looking for a very detailed article for each style and effects of this annotation overlay, please visit Codrops. Otherwise, I can provide simple adjustments for you, please use the forum.

The theme image preview we've used is from Ana Segota while the arrows are from Alessio Atzeni.

We're good to go! Advance Merry Christmas everyone.


Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top