Weebly Tricks #64 - CSS3 Fast Image Slideshow

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.

CLICK HERE FOR LIVE DEMO

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!

• fis.css

---

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

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!