July 27, 2014

Weebly Tricks #64 - CSS3 Fast Image Slideshow

Posted by Domingo Tambasacan at 7/27/2014

Fast Image Slideshow for Weebly


Here is another awesome photo effects that allow you to scan your photos with speed. The idea is to preview each photo on mouseover and stops on mousing out. Titles and descriptions are included as well. This is made with pure CSS3 which allows you to easily install on your Weebly Template. Useful on catering wide array of photos and products.







INTRODUCTION

The code has been simplified but nothing has changed from the original. You will need eight photos preferably having the same dimension, high quality and optimized. Want to add more photos? Just post a request on the forum.
Ok, time to proceed to the tutorial.



FILES NEEDED
How to use these files? Click Here!




HEADER CODE
Where to place these codes? Click Here!

<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/fis.css" type="text/css" media="screen" charset="utf-8" />
<style>
.hs-wrapper{
width: 320px;
height: 480px;
}
.hs-overlay span, .hs-titles span{
width: 280px;
}
.hs-titles span{
text-align: center;
}
</style>

Notes:
Red text - Change with your site address.
Green text - Change with the width and height of the images you will use.
Blue text - This is the width for the text strings. The value can be attained using the formula: "photo width -40" so for my demo I have the formula "320-40=280".
Yellow text - The alignment of your image description/title. Possible values are right, left and center.



BODY CODE
Where to place these codes? Click Here!

<div class="hs-wrapper">

    <img src="http://mwtdatabase.weebly.com/files/theme/fis1.jpg" alt="image01"/>
    <img src="http://mwtdatabase.weebly.com/files/theme/fis2.jpg" alt="image02"/>
    <img src="http://mwtdatabase.weebly.com/files/theme/fis3.jpg" alt="image03"/>
    <img src="http://mwtdatabase.weebly.com/files/theme/fis4.jpg" alt="image04"/>
    <img src="http://mwtdatabase.weebly.com/files/theme/fis5.jpg" alt="image05"/>
    <img src="http://mwtdatabase.weebly.com/files/theme/fis6.jpg" alt="image06"/>
    <img src="http://mwtdatabase.weebly.com/files/theme/fis7.jpg" alt="image07"/>
    <img src="http://mwtdatabase.weebly.com/files/theme/fis8.jpg" alt="image08"/>
   
    <div class="hs-overlay">
<span>HOTTEST <strong>GIRLS</strong></span>
</div>
  <div class="hs-titles">
<span>Lil Kim</span>
<span>Jennifer Lopez</span>
<span>Monica Bellucci</span>
<span>Emma Watson</span>
<span>Christina Aguilera</span>
<span>Keira Knightley</span>
<span>Liv Tyler</span>
<span>Shakira</span>
</div>
</div>

Notes:
Green text - Change with your image source link.
Blue text - The title of your album/ slideshow.
Yellow text - Description/ title for each photos respectively.



CONCLUSION

CSS3 works best on latest browsers like Chrome and Safari. Weebly is known to be good on handling images so it is recommended that you add some effects on them rather than leaving it static. Stay tune and keep updated. Myweeblytricks is a FREE community that helps you make your Weebly site even better.

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

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



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!

...

2 comments:

  1. i cant get fis.css
    dont you mint send me a copy
    phuocleduc11606@yahoo.com

    ReplyDelete
    Replies
    1. Sorry for that. I forgot to place the link. You can now download by right clicking on it and choose "save link as".

      Delete

 

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

Home | | Privacy Policy | Top