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>
<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.
What would the link be if you loaded the image onto your weebly site under files?
ReplyDeleteIf you want to load an image you uploaded under "add new files", the link would be http://mwtdatabase.weebly.com/files/theme/yourimage.png.
DeleteJust change with your site address and image name.
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!
ReplyDeleteHi Susan,
DeletePlease use the forum for tutorials. Thank You.
i'm so confused still ive read this over and over where do I even start?
ReplyDeleteStart with a blank page. Simply copy/paste. Then understand.
Delete