Weebly Tricks #56 - 8 Awesome Image Hover Effects with CSS3

Inspired with CSS3 effects, I would like to share the works of Allesio Atzeni from codrops. It uses pure CSS3 which is easier to apply on your Weebly site. While he says that these effects are experimental, there is no problem showing it on modern browsers that supports CSS3. There are actually 10 effects to discuss but I didn't include the second and the ninth for some unidentified problem.

CLICK HERE FOR DEMO

Before we proceed, I would like to introduce my new way of writing tutorials. To make it simpler, I will just divide my post into significant chunks with supporting links on them to avoid repeating words again and again.

---

FILES NEEDED
How to use these files? Click Here!

• alloriginal10.css

---

HEADER CODE
Where to place these codes? Click Here!

<style>
.view {
    width: 180px;
    height: 180px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(http://tympanus.net/Tutorials/OriginalHoverEffects/images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 180px;
    height: 180px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}
</style>
<link rel="stylesheet" href="http://myweeblytricksdemo.weebly.com/files/theme/alloriginal10.css" type="text/css" />

Notes:

Red text - These are your photo and mask dimension. It is important that they have the same value.

Green text - Change it with your website address.

---

BODY CODE
Where to place these codes? Click Here!

<div class="view view-first">  
     <img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpa1/t1.0-9/1010482_296872170464187_722262530_n.jpg" style="height: 180px; width: 180px;"/>
     <div class="mask">
     <h2>Title</h2>
     <p>Your Text</p>
         <a href="#" class="info">Read More</a>
     </div>
</div>

Notes:

Red text - Your class identifier with possible values of first, third, fourth, fifth, sixth, seventh, eighth, tenth.

Green text - Your image link source.

Blue text - Your image inline size which should be the same to your header code.

Yellow text - Your preferred title, description and hyperlink. Please see the demo.

# - replace it with the link your pointing to for your "Read More" text.

---

CONCLUSION

I really admire these effects and to give credit to the code creator, please visit his site (more details on demo page).

Are these codes really beautiful? Give us what you think!

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!