November 20, 2014

Weebly Tricks #81 - Smooth Subtle Hover Effects

Posted by Domz at 11/20/2014



This tutorial doesn't use JavaScript, thus concentrates on 3D transforms and some pseudo-element transitions as stated on Codrops. Upon completion, the output creates an amazing, very smooth hover effects for your photos. The steps are so simple so try it now and impress your visitor while on your site.





Note, before you start, remember that these effects works best on modern browsers.


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/suhoef.css" rel="stylesheet" type="text/css" />

Note:
Red text - Change with your site address since you uploaded the file on your template.


BODY CODE
Where to place these codes? Click Here!


<div class="grid">

    <figure class="effect-julia">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="Lily Playing"/>
        <figcaption>
            <h2>Nice <span>Lily</span></h2>
          <div>
          <p>Lily likes to play
            with crayons</p>
  <br>
  <p>and pencils.</p>
          </div>
            <a href="http://www.myweeblytricks.com/">View more</a>
        </figcaption>      
    </figure>
</div>

Notes:
Red text - This will be your style code. Try also moses. This is case sensitive.
Green text - The link source of the image you used.
Blue text - A short description of the image for search engines. (not visible)
Yellow text - These will be your texts.
Pink text - The where visitors go when they clicked your image.


CONCLUSION





Ok, I only gave you two example on the demo page. That is using the style julia and moses. There are lot more styles so visit Codrops, the link is provided on the demo page.

The steps are super easy. And if you find any difficulties or adjustments to the effects, feel free to post it on the forum.


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!

...

6 comments:

  1. What would the link be if you loaded the image onto your weebly site under files?

    ReplyDelete
    Replies
    1. If you want to load an image you uploaded under "add new files", the link would be http://mwtdatabase.weebly.com/files/theme/yourimage.png.

      Just change with your site address and image name.

      Delete
  2. Thanks worked this out, from trial and error! How do I edit the pic size of the Smooth Subtle Hover effects (Julia), I want 3 pics side by side and the default is too big to fit alongside on screen. I tried to edit the .css file and change px size but then it didn't work eek. Yes I'm a novice!

    ReplyDelete
    Replies
    1. Hi Susan,

      Please use the forum for tutorials. Thank You.

      Delete
  3. i'm so confused still ive read this over and over where do I even start?

    ReplyDelete
    Replies
    1. Start with a blank page. Simply copy/paste. Then understand.

      Delete

 

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

Home | | Privacy Policy | Top