June 23, 2014

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

Posted by Domingo Tambasacan at 6/23/2014

Pure CSS3 image mouseover for Weebly


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.








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!




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

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. Hi, I love your website. I have tried out 2 of your tutorials and they came out great! Not sure which one I'll use. Your tutorials are very easy to follow! I have run into a little problem with fonts though. I cannot change the font size in the code b/c it seems to be overriden by weebly's font code. For instance, in the tutorial about - the title (yellow highlight) is controlled by weebly's paragraph title font controls and not what number I use in the code. Hope that makes sense. Is there a code I can use to override this for this effect. I have spent two days trying and I'm going crazy!

    Thank you in advance for your help and keep up the good work!

    ReplyDelete
    Replies
    1. Hi Ynette,

      Glad to see you here. Those font size, style and color is some of the trickiest part to edit. But you know what, you might find some hidden tips when you post this on the forum.

      See you there.

      Delete

 

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

Home | | Privacy Policy | Top