As promised, jQuery Witchcraft is back and ready to spice up the web around.
What should we begin with? Well being this one the first ingredient of our magic potion, let’s start with a clean and nice work, made from scratch by our team, we bring to you – Elastic Fog.
Elastic Fog is a presentation tool or maybe more a portfolio featured-pieces highlighter, wich brings some more dynamics to your show. All code is jQuery native so you don’t need to upload tones of scripts to get it work. The rest is classic html and css.
Those being said,the code sources are displayed bellow, together with download and live demo link. You olso can select or double click the code or part of code and then copy it to your clipboard.
Enjoy !
The HTML potion
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Elastic Fog - jQuery Witchcraft by emotionSTUDIOS</title>
<link href="elastic_fog.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--loading latest jQuery-->
<script type="text/javascript" src="elastic_fog.js"></script>
<!--loading elastic script ( you can also keep it in your internal html )-->
</head>
<body>
<div id="content"><!--id of your container here-->
<div class="holder"><!--the class wich will triger the effect-->
<img src="images/emotionstudios_orange.jpg" alt="emotionstudios orange. we also." />
<div class="desc"><p>We earned our experience working on various projects.</p></div>
</div>
<div class="holder"><!--the class wich will triger the effect-->
<img src="images/emotionstudios_blue.jpg" alt="emotionstudios blue" />
<div class="desc"><p>We earned our experience working on various projects.</p></div>
</div>
<div class="holder"><!--the class wich will triger the effect-->
<img src="images/emotionstudios_dark_blue.jpg" alt="emotionstudios dark blue" />
<div class="desc"><p>We earned our experience working on various projects.</p></div>
</div>
</div>
<div id="text"></div><!--the div where the like text will apear -->
</body>
</html>
The CSS potion
@charset "utf-8";
/* CSS Document */
body {margin-left: 0px;margin-top: 0px; }
#content{ background:; padding:5px; position:relative; float:left; margin:0 auto; }
.holder{position:relative; float:left;padding:5px; background:#FFFFFF; overflow:hidden;}
.desc{ position:absolute; bottom:-50px; left:5px; height:50px; width:232px; background:#FFFFFF; filter: alpha(opacity=80); opacity:0.8;-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;box-shadow: inner 0 0 5px #888;
}
.desc p {font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:5px 10px 5px 10px; line-height:16px; color:#993300;}
#text {font-family: Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; margin:5px 10px 5px 10px; line-height:18px; color:#666666; clear:both; text-transform: uppercase; }
The jQuery potion
// JavaScript Document
$(function(){
$('#text').text('Pick one');
$('.holder img').css({"opacity" : .4 });
$('.holder').hover(function(){
$(this).children('img').stop().animate({ "opacity" : 1, "width" : 252, "height" : 254}, 200);
$(this).children('.desc').stop().animate({ "bottom" : 5, "width" : 252, "height" : 50, "opacity" : 1 }, 200);
$('#text').text('You like ' + $(this).children('img').attr("alt"));
}, function(){
$(this).children('img').stop().animate({ "opacity" : .4, "width" : 232, "height" : 234}, 2000);
$(this).children('.desc').stop().animate({ "bottom" : -55, "height" : 234, "opacity" : 0}, 500);
$('#text').text('Pick one');
});
});
Don’t forget to pass by and let us know your opinion. Criticism is accepted too.
LEAVE A COMMENT
Make sure you enter the ( * ) information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!