Blogger Resim Efektleri | Grow | Shrink | Sidepan | Vertical | Tilt | Morp | Focus | Blur | Brighten | Bump | Grayscale |
Merhaba dostlar ; bu yazımızda sizlerle Blogger sistemini kullananlar için resim efektleri paylaşacağız.Paylaşacağımız efektlerin en güzel tarafı site üzerinde bulunan bütün resimlere etki ediyor olması.Yani her yazınızda kodlarla vs uğraşmanız gerekmeyecek.
Hemen kodlarımızı paylaşmaya başlayalım.Aşağıdan seçeceğiniz kodları ]]></b:skin> kodunun üst tarafına ekleyin.
1 ) Grow CSS image hover effect
.post-body img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 400px;
height: 400px;
}
2 ) Shrink CSS image hover effect
/*SHRINK*/
.post-body img {
height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 300px;
height: 300px;
}
.post-body img {
height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 300px;
height: 300px;
}
3 ) Sidepan CSS image hover effect
/*SIDEPAN*/
.post-body img {
margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.post-body img:hover {
margin-left: -200px;
}
4 ) Vertical pan CSS image hover effect
/*VERTPAN*/
.post-body img {
margin-top: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.post-body img:hover {
margin-top: -200px;
}
5 ) Tilt CSS image hover effect
/*TILT*/
.post-body img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post-body img:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
6 ) Morph CSS image hover effect
/*MORPH*/
.post-body img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post-body img:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
7 ) Focus CSS image hover effect
/*FOCUS*/
.post-body img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
border: 70px solid #000;
border-radius: 50%;
}
8 ) Blur CSS image hover effect
/*BLUR*/
.post-body img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
-webkit-filter: blur(5px);
}
9 ) Brighten CSS image hover effect
/*DARKEN*/
.post-body img {
-webkit-filter: brightness(-65%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
-webkit-filter: brightness(0%);
}
10 ) Bump up CSS image hover effect
.post-body img { border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out;}.post-body img:hover { margin-top: 2px;}
11 ) Grayscale effect CSS image hover effect
.post-body img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}.post-body img:hover { filter: none; -webkit-filter: grayscale(0%);}
Yorumlar
Yorum Gönder