In this article im gonna explain how to add Css3 Peel Image Effect For Blogger for blogger. You can
add this widget to your sidebar and add a link to image. Im using CSS and HTML for this widget. you can use your own image by changing links i mentioned end of the code.Follow these step to add to your blog. Get all photo gallery.
You may like these articles
Stylish Sliding Up Image Description for Blogger
Stylish jQuery Image Menu For Blogger
Awesome Jquery Rotate Effect For Blogger Images
Awesome CSS3 Image Circle Hover Effect For Blogger
1. Log in to blogger account and Click drop down.
2. Now select "Layout" Like Below.
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.
5. Now save your HTML/Javascript'. You are done.
You can add this Css3 Peel Image Effect to blogger post too.
add this widget to your sidebar and add a link to image. Im using CSS and HTML for this widget. you can use your own image by changing links i mentioned end of the code.Follow these step to add to your blog. Get all photo gallery.
Stylish jQuery Image Menu For Blogger
Awesome Jquery Rotate Effect For Blogger Images
Awesome CSS3 Image Circle Hover Effect For Blogger
How to add Css3 Peel Image Effect For Blogger
1. Log in to blogger account and Click drop down.
2. Now select "Layout" Like Below.
4. Paste below code.
<style type="text/css"> a.nowandthen{ position:relative; display: block; overflow:hidden; cursor: pointer; width: 650px; height: 434px; } a.nowandthen img{ position:absolute; left:0; top:0; width: 100%; height: 100%; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 2; clip: rect(0,650px,434px,0); } a.nowandthen img:nth-of-type(2){ z-index: 1; } a.nowandthen:hover img:nth-of-type(1){ clip: rect(0,0,434px,0); opacity: 0; } </style> <a class="nowandthen" href="http://www.blogger.com/null"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ghLWMDZHLEgfYiHfZpi_EDQ2s6VfqUGnXNPcntmCpJmTPQwLnC4RCVTq9HsxxxwIIGXUj1skbJ_9hcgzBR_kvyxFLedajn4g_u3ErwiM7zFhH8nP7DeOh8Q6VBnXTLEEqTo0e3RK76I/s1600/sunset-sunrise-btrix+(1).jpg" /> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWr6bwcsskIsd1n6zMulIqDH4R85Ru4ZpwG3BxQzRF1L2sU4WzUPnDjlxLS0beCpFB5Ep0MaXiieDqvPnJtMWw9ccUYR9egDw4LDMRNuDSjjUbhuYXCq5djdcheYKS5blg5iND_Ssz1w/s1600/sunset-sunrise-btrix+(2).jpg" /> </a>
5. Now save your HTML/Javascript'. You are done.
You can add this Css3 Peel Image Effect to blogger post too.
Great dud, ill use this for my blog.
ReplyDelete