படங்களின் வட்ட தொடு உணர்வு : HTML பகுதி பத்து

நாம் பதிவுகளின் நடுவிலோ அல்லது மற்ற இடங்களிலோ படங்களை இணைக்கும் போது அதற்கு தொடு உணர்வு எதுவும் கொடுத்திருக்க மாட்டோம் .


படங்களை தொட்டால் பல தொடு உணர்வுகளை படத்தில் புகுத்தினால் எப்படி இருக்கும் என்பதை விளக்கும் பதிவு ... ஹச்.டி.எம்.எல்.  சில கோடிங்களை தமிழில் கொடுக்கும் சின்ன முயற்சி . நீங்கள் கொடுக்கும் பின்னூட்டத்தின் மூலமாக அடுத்த பகுதி எழுதுவதில் உற்சாகம் ஏற்படும் .. கண்டிப்பாக மறக்காமல் கருத்துக்களை சொல்லி விட்டு செல்லுங்கள் .


படங்களை தொட்டு பார்க்கவும் ....
1.

<style><br />.hoverimg1{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;padding:10px;border:1px solid #ccc;background:#FFF}.hoverimg1:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:50% 0%;box-shadow:0 0 15px #000;cursor:pointer;border:0}
</style><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7c5dXbLa7ZnSRbI8Z4aJq3BIhjGBetuht9-GrtfzgurbPAXA-MHmJRSsf7Um4n0H1fuTZ2edrEaZxJU-Xf7A-QQnGysDxGzbAjrLFA-Xr0fb8XkQ_NzrdKpzx9meeYh-A8_HIKxjKFJUH/s280/gunung.jpeg" class="hoverimg1">

 2.

<style>
.hoverimg2{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:50% 0;box-shadow:0 0 15px #000;padding:10px;border:0;background:#FFF}.hoverimg2:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:0;cursor:pointer}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7c5dXbLa7ZnSRbI8Z4aJq3BIhjGBetuht9-GrtfzgurbPAXA-MHmJRSsf7Um4n0H1fuTZ2edrEaZxJU-Xf7A-QQnGysDxGzbAjrLFA-Xr0fb8XkQ_NzrdKpzx9meeYh-A8_HIKxjKFJUH/s280/gunung.jpeg"class="hoverimg2">

3.

<style>
.hoverimg3{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;padding:0}.hoverimg3:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:50%;box-shadow:0 0 15px #000;border:0;cursor:pointer}</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7c5dXbLa7ZnSRbI8Z4aJq3BIhjGBetuht9-GrtfzgurbPAXA-MHmJRSsf7Um4n0H1fuTZ2edrEaZxJU-Xf7A-QQnGysDxGzbAjrLFA-Xr0fb8XkQ_NzrdKpzx9meeYh-A8_HIKxjKFJUH/s280/gunung.jpeg" class="hoverimg3">

4. 

 <style>
.hoverimg4{border:0;padding:0;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:50%;box-shadow:0 0 15px #000;border:0;padding:10}.hoverimg4:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;box-shadow:0;cursor:pointer;border-radius:0}</style><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7c5dXbLa7ZnSRbI8Z4aJq3BIhjGBetuht9-GrtfzgurbPAXA-MHmJRSsf7Um4n0H1fuTZ2edrEaZxJU-Xf7A-QQnGysDxGzbAjrLFA-Xr0fb8XkQ_NzrdKpzx9meeYh-A8_HIKxjKFJUH/s280/gunung.jpeg" class="hoverimg4">

5. 

<style>
.hoverimg5{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:55% / 20%;box-shadow:0 0 15px #000;padding:0}.hoverimg5:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:0;cursor:pointer}</style><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7c5dXbLa7ZnSRbI8Z4aJq3BIhjGBetuht9-GrtfzgurbPAXA-MHmJRSsf7Um4n0H1fuTZ2edrEaZxJU-Xf7A-QQnGysDxGzbAjrLFA-Xr0fb8XkQ_NzrdKpzx9meeYh-A8_HIKxjKFJUH/s280/gunung.jpeg" class="hoverimg5">

6. 

<style>
.hoverimg6:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:55% / 20%;box-shadow:0 0 15px #000;padding:0}.hoverimg6{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:0;cursor:pointer}</style><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7c5dXbLa7ZnSRbI8Z4aJq3BIhjGBetuht9-GrtfzgurbPAXA-MHmJRSsf7Um4n0H1fuTZ2edrEaZxJU-Xf7A-QQnGysDxGzbAjrLFA-Xr0fb8XkQ_NzrdKpzx9meeYh-A8_HIKxjKFJUH/s280/gunung.jpeg" class="hoverimg6">

படங்களின்உரலை மாற்றிக் கொள்ளலாம் ..

கோடிங்கை சிறிதளவும் மாற்றாமல் பதிவிலோ ,அல்லது விட்ஜெட்டிலோ

PASTE செய்தால் இது போன்ற தொடு உணர்வு படங்களை உணரலாம் ..

பதிவு பிடித்திருந்தால் இடதுபக்கத்தில் உள்ள சமூகத்தளங்களில் பகிர்ந்து 

கொள்ளுங்கள் . நன்றி