[Code] Hiệu ứng ảnh - Ứng dụng được nhiều

Mình mới sưu tầm được một số css ảnh khá hay, có thể bạn sẽ cần dùng đến, tùy vào óc sáng tọa của bạn, thử nha! :phunu:

Vì mình không đưa trực tiếp demo vào bài viết được nên mình sẽ làm demo sau: Không các bạn có thể tự cho css vào và kiểm tra cũng đc :noidan:

Mẫu 1:

Code:

Code:

<div id="cf">
   <img class="bottom" src="http://css3.bradshawenterprises.com/images/Summit.jpg" />
   <img class="top" src="http://css3.bradshawenterprises.com/images/Stones.jpg" />
</div>

Css:

Code:

#cf {position:relative;height:281px;width:450px;   margin:0 auto;   }#cf 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;-ms-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;}#cf img.top:hover {opacity:0;}   

Mẫu 2:

Code:

Code:

<div id="cf2" class="shadow">
   <img class="bottom" src="http://css3.bradshawenterprises.com/images/Summit.jpg" />
   <img class="top" src="http://css3.bradshawenterprises.com/images/Stones.jpg" />
</div>
<p id="cf_onclick">Click vào ảnh</p>

Css:

Code:

#cf2 {position:relative;height:281px;width:450px;margin:0 auto;}#cf2 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;-ms-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;}#cf2 img.transparent {opacity:0;}#cf_onclick {cursor:pointer;}   

Script:

Code:

<script>
$(document).ready(function() {
   $("#cf_onclick, #cf2 img.top").click(function() {
      $("#cf2 img.top").toggleClass("transparent");
   });
});
</script>

Mẫu 3:
Loại 1:
Code:

Code:

<div id="cf3" class="shadow">
   <img class="bottom" src="http://css3.bradshawenterprises.com/images/Summit.jpg" />
   <img class="top" src="http://css3.bradshawenterprises.com/images/Stones.jpg" />
</div>

Css:

Code:

@keyframes cf3FadeInOut {0% {opacity:1;}45% {opacity:1;}55% {   opacity:0;}100% {opacity:0;}}#cf3 img.top {   animation-name: cf3FadeInOut;animation-timing-function: ease-in-out;animation-iteration-count: infinite;animation-duration: 10s;   animation-direction: alternate;}

Loại 2:
Code:

Code:

<div id="cf4a" class="shadow">
   <img src="http://css3.bradshawenterprises.com/images/Stones.jpg">
   <img src="http://css3.bradshawenterprises.com/images/Summit.jpg">
   <img src="http://css3.bradshawenterprises.com/images/Clown Fish.jpg">
   <img src="http://css3.bradshawenterprises.com/images/Cirques.jpg">
</div>

Css:

Code:

@keyframes cf4FadeInOut {
   0% {
      opacity:1;
   }
   17% {
      opacity:1;
   }
   25% {
      opacity:0;
   }
   92% {
      opacity:0;
   }
   100% {
      opacity:1;
   }
}

#cf4a img:nth-of-type(1) {
   animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
   animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
   animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
   animation-delay: 0;
}

Mẫu 4:

Code:

Code:

<div id="cf4" class="hover">
   <img class="bottom shadow" src="http://css3.bradshawenterprises.com/images/Stones.jpg">
   <img class="top shadow" src="http://css3.bradshawenterprises.com/images/Summit.jpg">
</div>

Css:

Code:

   #cf4 {
      position:relative;
      height:281px;
      width:450px;
      margin:0 auto;
   }
   #cf4 img {
      position:absolute;
      left:0;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
   }

   #cf4 img.top {
      -webkit-transform:scale(0,0);
      -moz-transform:scale(0,0);
      -o-transform:scale(0,0);
      -ms-transform:scale(0,0);
      transform:scale(0,0);
      opacity:0;

   }

   #cf4:hover img.top, #cf4.hover_effect img.top {
      opacity:1;
      -webkit-transform:scale(1,1);
      -webkit-transform-origin: top right;
      -moz-transform:scale(1,1);
      -moz-transform-origin: top right;
      -o-transform:scale(1,1);
      -o-transform-origin: top right;
      -ms-transform:scale(1,1);
      -ms-transform-origin: top right;
      transform:scale(1,1);
      transform-origin: top right;
   }

   #cf4:hover img.bottom, #cf4.hover_effect img.bottom {
      -webkit-transform:scale(0,0);
      -webkit-transform-origin: bottom left;
      -moz-transform:scale(0,0);
      -moz-transform-origin: bottom left;
      -o-transform:scale(0,0);
      -o-transform-origin: bottom left;
      -ms-transform:scale(0,0);
      -ms-transform-origin: bottom left;
      transform:scale(0,0);
      transform-origin: bottom left;
   }

Mẫu 5:

Code:

Code:

<div id="cf5" class="hover">
   <img class="bottom shadow" src="http://css3.bradshawenterprises.com/images/Stones.jpg">
   <img class="top shadow" src="http://css3.bradshawenterprises.com/images/Summit.jpg">
</div>

Css:

Code:

#cf5 {
      position:relative;
      height:281px;
      width:450px;
      margin:10px auto;
   }
   #cf5 img {
      position:absolute;
      left:0;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
   }

   #cf5 img.top {
      -webkit-transform:scale(1,0);
      -moz-transform:scale(1,0);
      -o-transform:scale(1,0);
      -ms-transform:scale(1,0);
      transform:scale(1,0);
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity:0;

   }

   #cf5:hover img.top, #cf5.hover_effect img.top {
      opacity:1;
      -webkit-transform:scale(1,1);
      -moz-transform:scale(1,1);
      -o-transform:scale(1,1);
      -ms-transform:scale(1,1);
      transform:scale(1,1);
   }

   #cf5:hover img.bottom, #cf5.hover_effect img.bottom {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -webkit-transform:rotate(360deg) scale(0,0);
      -moz-transform:rotate(360deg) scale(0,0);
      -o-transform:rotate(360deg) scale(0,0);
      -ms-transform:rotate(360deg) scale(0,0);
      transform:rotate(360deg) scale(0,0);
   }


Mẫu 6:

Code:

Code:

<div id="cf6_image"></div>

Css:

Code:

   #cf6_image {
      margin:0 auto;      
      width:450px;
      height:281px;
      -webkit-transition: background-image 1s ease-in-out;
      -moz-transition: background-image 1s ease-in-out;
      -o-transition: background-image 1s ease-in-out;
      -ms-transition: background-image 1s ease-in-out;      
      transition: background-image 1s ease-in-out;
      
      background-image:url("http://css3.bradshawenterprises.com/images/Stones.jpg");
   }
   
   #cf6_image:hover, #cf6_image.hover_effect {
      background-image:url("http://css3.bradshawenterprises.com/images/Summit.jpg");      
   }