http://my.dek-d.com/12235/writer/view.php?id=806042
http://my.dek-d.com/bananajub555/writer/view.php?id=806042

ขอบภาพเรืองแสง ชี้แล้วเปลี่ยนสี 2

 img:hover{
 -webkit-box-shadow: 0px 0px 3px 3px #ใส่โค้ดสีเมื่อชี้ภาพ ;
 box-shadow: 0px 0px 3px 3px  #ใส่โค้ดสีเมื่อชี้ภาพ;
 }
 img{
 -webkit-box-shadow: 0px 0px 3px 3px #ใส่โค้ดสีภาพนิ่งก่อนชี้;
 box-shadow: 0px 0px 3px 3px #ใส่โค้ดสีภาพนิ่งก่อนชี้;
 -webkit-transition: all 1.0s ease;
 transition: all 1.0s ease;
 }

ชี้ภาพแล้วมีกรอบเพิ่มขึ้นมา 3

IMG:HOVER {;-MOZ-BOX-
SHADOW: 10PX 10PX 5PX #595858;-WEBKIT-BOX-SHADOW: 10PX 10PX
5PX #595858;BOX-SHADOW: 10PX 10PX 5PX #595858;} img
{-webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;}

ชี้ภาพแล้วมีเอฟเฟคซ้ำออกมา 4

IMG:HOVER {  OPACITY: 1;  /*REFLECTION*/-WEBKIT-BOX-REFLECT: BELOW 0PX -WEBKIT-GRADIENT(LINEAR, LEFT TOP, LEFT BOTTOM, FROM(TRANSPARENT), COLOR-STOP(.7, TRANSPARENT), TO(RGBA(0,0,0,0.4)));}

ชี้ภาพแล้วเอียงซ้าย 5

IMG:HOVER
{-WEBKIT-TRANSFORM: ROTATE(-5DEG);-MOZ-TRANSFORM:
ROTATE(-5DEG);-O-TRANSFORM: ROTATE(-5DEG);}img
{-webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;}

ชี้ภาพแล้วค่อยๆจาง 6

img { filter: alpha
(opacity=100); opacity:1.0;}img:hover { filter: alpha(opacity=70);
opacity:.7 } img {-webkit-transition:0.7s; -moz-transition:0.7s;
-o-transition:0.7s;}

ภาพจางชี้แล้วชัดขึ้น 7

 img {filter:alpha(opacity=70); opacity:.7;-webkit-transition:1.0s; -moz-transition:1.0s;
 -o-transition:1.0s;} 
 img:hover {filter: alpha(opacity=100);opacity:1.0}

ทำภาพให้เป็นขอบโค้ง (วงกลม) 8

 img {border-radius: 50%;}

ชี้ภาพแล้วเป็นกรอบเฉียง 9

img{-webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;}
img:hover{border-top-left-radius: 30px;border-bottom-right-radius: 30px;
.whateveryourpostdivis Img{border-top-left-radius: 30px;border-
bottom-right-radius: 30px;}border-top-left-radius: 30px;border-bottom-right-radius:
30px;webkit-transition: 1s ease-in-out;moz-transition: 1s ease-in-out;ms-transition:
1s ease-in-out;-webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;}

ไม่ต้องชี้ เฉียงเลย

img {border-top-left-radius:
30px;border-bottom-right-radius: 30px;.whateveryourpostdivis Img{border-top-left-radius:
30px;border-bottom-right-radius: 30px;}border-top-left-radius: 30px;border-bottom-right-
radius: 30px;webkit-transition: 1s ease-in-out;moz-transition: 1s ease-in-out;ms-transition:
1s ease-in-out;

ชี้ภาพแล้วเปลี่ยนเป็นอีกภาพหนึ่ง 10

<a href="ใส่ URL ของเว็บที่จะคลิกเข้าไป"><img src="ใส่ URL ภาพแรก"
onmouseover="this.src='ใส่ URL ภาพที่จะเปลี่ยน'" onmouseout
="this.src='ใส่ URL ภาพแรกอีกทีนึง'" /></a>

ภาพขอบโค้ง 11

 img {border-radius: 8px;}

ภาพมีขอบ ภาพชี้แล้วดูเป็นสามมิติ 57

img:hover {border: 1px dashed #โค้ดสีเส้นประเมื่อชี้ภาพ;box-shadow: 1px 1px 5px #สีของเงาเมื่อชี้;-webkit-transition:1.5s; -moz-transition:1.5s; -o-transition:1.5s;border-radius: 6px;-webkit-border-radius: 6px;}img {border: 1px dashed#โค้ดสีเส้นประยังไม่ได้ชี้ภาพ;padding: 5px;-webkit-transition:1.5s; -moz-transition:1.5s; -o-transition:1.5s;border-radius: 5px;-webkit-border-radius: 5px;}