تأثر على صور البلوجر

للمعاينة مرر الماوس على الصورة

الكود الأول الخاصة بالإضافة الأولى والتي هي إطار للصور :

.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; }
 

الكود الثاني الخاصة بالإضافة الثانية والتي هي تأثير ابيض واسود:

.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%); }
 




reed mor

http://gooplz.blogspot.com/2014/05/how-to-add-an-animation-on-pic-of-your-blog.html