മൗസ് പോയിന്റ്‌ വരുമ്പോള്‍ ഇമേജ് സൂം ചെയ്യുന്ന ഇഫെക്റ്റ് നല്‍കുന്നതെങ്ങനെ?

       മൗസ് പോയിന്റ്‌ വരുമ്പോള്‍ ഇമേജ് സൂം ചെയ്ത് വലുതായി വരുന്ന ഇഫെക്റ്റ് നല്‍കുന്നത് എങ്ങനെയെന്ന് നോക്കാം ...

           View Demo

1.  Blogger ല്‍  sign-in ചെയ്ത് , ബ്ലോഗ്‌ സെലക്ട്‌ ചെയ്യുക 

2. തുറന്ന് വന്ന പേജില്‍  Template എന്ന പേജ് ഓപ്പണ്‍ ചെയ്യുക

( Backup/Restore  ക്ലിക്ക് ചെയ്ത് Template full ഡൌണ്‍ലോഡ് ചെയ്യുക )

3. Edit HTML എന്ന ബട്ടണ്‍ ക്ലിക്കുക 

4.താഴെ നല്‍കിയിട്ടുള്ള കോഡ്  ]]></b:skin> ഈ കോടിന് just മുകളില്‍ ചേര്‍ക്കുക

.hovergallery img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 10px 5px 0; } .hovergallery img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }

5. ഇനി ഇമേജ് പോസ്റ്റ്‌ ചെയ്യാനായി താഴെയുള്ളത് പോലെ പോസ്റ്റ്‌ ചെയ്യുക

<a class="hovergallery" href="http://mohammedsalihkk.blogspot.in/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOzFE8gQGf8ijj8ttDx9XonD-kicIfcKgOm7btpuUmxCFPyPnWFR0q3cf_m0y_7xxBOTaiFo-FfNVoJAnlgqlc3GyHBOG9Dwjjg5aYAfydt1HLpdMacxfZhkFzb0wzoZjbRY9pR428tP4/s1600/324264775.jpg" /></a>

ഇമേജ് ലിങ്കും ഹൈപെര്‍ലിങ്കും നിങ്ങളുടെ ഇഷ്ടാനുസരണം മാറ്റുക