Submit your widget

CSS and Jquery: an Image Slider

Created 13 years ago   Views 14748   downloads 2443    Author freecss
CSS and Jquery: an Image Slider
View DemoDownload
132
Share |

Basically you are going to create a jquery effect. When a holder is hovered over the top image slides down to reveal the image underneath. I will also explain how to use position absolute to float an image in the top right to show the image is new.

The HTML

Okay let"s get stuck in. First of all we will do the HTML. We will start with a holder div to hold everything (images, price and title). This means it can be floated to the left or right so we could have three or four in a row. Inside the main holding div we will need a div to hold both images. It will have to have a position of relative to hold the absolutely positioned images (when a div is position absolutely it will position itself according to a relatively position container). So in my example the starting HTML should be something like so:

<div class="temp">
  <div class="temphol">
  <img src="images/thumb_screen_thumb.jpg" alt="Your Blog" border="0′/>
  <img src="images/screen_thumb.jpg" class="front" alt="color structure"  border="0′/>
  </div>
  </div></pre>
</p>
<h4>The CSS</h4>
<p>Right that"s simple enough isn"t it? Now for the CSS, which is also  very  simple. Let"s just think about it. The only things we really need  to do is make  sure the div holder "temphol" is positioned relatively,  overflow is  hidden and and images inside it are absolute positioned.  The reason we need  overflow to be hidden is that the jquery will just  move the image down. If overflow  is not hidden we will see the image  move down instead of disappearing. I also  included some padding and  background properties to make it look a bit better.
  .temp{
  float:left;
  width:292px;
  margin:20px;
  }
  .temphol{
  background:#efefef;
  border:1px solid #ccc;
  position:relative;
  width:290px;
  height:155px;
  overflow:hidden;
  }
  .temphol img {
  position: absolute;
  top: 7px; left: 7px;
  } 

The JavaScript

Okay you should now be able to see one image in a holding div with a background. Now we will go over the jquery to get the sliding effect to work. First thing to take note – its really simple:

 <script type="text/javascript">
  $(function() {
  $(".temphol").hover(function() {
  $(this).children(".front").stop().animate({ "top" : ‘160px"}, 500);
  }, function() {
  $(this).children(".front").stop().animate({ "top" : ‘7px"}, 300);
  });
  });
  </script>

To get it to work you will need to put the above in your head section of your webpage and also include the jquery javascript framework. You can download it from their website. You will also need to add class="front" to the image which you want to show on the top to start with and also change .temphol in the above snippet to whatever your image holder class is. In my example you will notice my images have top:7px. This is just to create the border effect. You can easily do it where your images and position at the very top of the holder div. In this case you will need to change "top" : ‘7px" in the javascript snippet above.

 

Adding the new image

Okay so now I will go over adding the new image into the top right. The first thing to do is create the image. If the image is a triangle such as in my example the image will need to be a PNG on a transparent background. To position it is simple; just add a new div after the two images with a class of new. Then in your CSS make sure this new class is position absolutely to the top right. Here is the code I used in my example:

 .new{
  background:url(images/new-trans.png) no-repeat top right;
  width:58px;
  height:58px;
  position:absolute;
  right:0;
  top:0;
  }

<div class="temp">
  <div class="temphol">
  <img src="images/thumb_screen_thumb.jpg" alt="Your Blog" border="0′/>
  <img src="images/screen_thumb.jpg" class="front" alt="color structure"  border="0′/>
  <div class="new"></div>
  </div>
  </div>

Please note that since you are using a PNG you will have to use a simple hack for it to work in internet explorer. 

Making the whole thing into a link

Okay in this section we will make the whole thing into a link. We can"t make the images linkable as they will move and also the new image is positioned over the top of them. I"m not sure if this is the easiest way, but it"s the only way I could get to work. Basically what I did was add a div which is the same height and width of the main holding div and position it absolutely over the top and make it a link. It will also need to be transparent otherwise it will cover up everything we just created:

The CSS

.thumb{
  position:absolute;
  top:7px;
  left:7px;
  width:276px;
  height:141px;
  text-indent:-999px;
  overflow:hidden;
  background:url(images/blank.gif) repeat;
  }

Then to get it to work simple place the following after the closing div for new but still in the temphol holder:

 <a href="#" class="thumb">your link</a>

You will notice from the CSS for this to work you will need to create a blank.gif. This is simply a fully transparent image. This is needed for this effect to work in internet explorer. If the background is just set as none the link is considered not to exist and therefore not linkable.