Simple fading between multiple images on click

CSS3_sliding
This post describe the Simple fading between multiple images on click. It is a very similar to the others – just layout the images on top of each other, set them all to be transparent, then when the controls are clicked change that one to opaque.

HTML Code

<div id="cf7" class="shadow">
  <img class='opaque' src="/images/Cirques.jpg" />
  <img src="/images/Clown%20Fish.jpg;" />
  <img src="/images/Stones.jpg;" />
  <img src="/images/Summit.jpg;" />
</div>
<p id="cf7_controls">
  <span class="selected">Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
  <span>Image 4</span>
</p>

</div>

Image 1

Image 2

Image 3

Image 4

CSS Code

p#cf7_controls {
  text-align:center;
}
#cf7_controls span {
  padding-right:2em;
  cursor:pointer;
}
#cf7 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto 10px;
}
#cf7 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#cf7 img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

p#cf7_controls {

text-align:center;

}

#cf7_controls span {

padding-right:2em;

cursor:pointer;

}

#cf7 {

position:relative;

height:281px;

width:450px;

margin:0 auto 10px;

}

#cf7 img {

position:absolute;

left:0;

-webkit-transition: opacity 1s ease-in-out;

-moz-transition: opacity 1s ease-in-out;

-o-transition: opacity 1s ease-in-out;

transition: opacity 1s ease-in-out;

opacity:0;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

}

#cf7 img.opaque {

opacity:1;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=1);

}

JS Code

$(document).ready(function() {
  $("#cf7_controls").on('click', 'span', function() {
    $("#cf7 img").removeClass("opaque");

    var newImage = $(this).index();

    $("#cf7 img").eq(newImage).addClass("opaque");

    $("#cf7_controls span").removeClass("selected");
    $(this).addClass("selected");
  });
});

$(document).ready(function() {

$("#cf7_controls").on('click', 'span', function() {

$("#cf7 img").removeClass("opaque");

var newImage = $(this).index();

$("#cf7 img").eq(newImage).addClass("opaque");

$("#cf7_controls span").removeClass("selected");

$(this).addClass("selected");

});

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Simple fading between multiple images on click

Recommended Posts:

webmentor