code ภาพ เม้าส์วาง

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

ขอบภาพเรืองแสง ชี้แล้วเปลี่ยนสี 2
<style type="text/css">
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;
}
</style>

ชี้ภาพแล้วมีกรอบเพิ่มขึ้นมา 3
<style name="captain" type="text/css">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;} </style>

ชี้ภาพแล้วมีเอฟเฟคซ้ำออกมา 4
<style name="captain" type="text/css">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)));}</style>

ชี้ภาพแล้วเอียงซ้าย 5
<style name="captain" type="text/css">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;} </style>

ชี้ภาพแล้วค่อยๆจาง 6
<style name="captain" type="text/css">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;} </style>

ภาพจางชี้แล้วชัดขึ้น 7
<style name="captain" type="text/css">
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}</style>

ทำภาพให้เป็นขอบโค้ง (วงกลม) 8
<style name="captain" type="text/css">
img {border-radius: 50%;}</style>

ชี้ภาพแล้วเป็นกรอบเฉียง 9
<style name="captain" type="text/css">
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;}
</style>

ไม่ต้องชี้ เฉียงเลย
<style name="captain" type="text/css">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; </style>

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

ภาพขอบโค้ง 11
<style name="captain" type="text/css">
img {border-radius: 8px;}</style>

ภาพมีขอบ ภาพชี้แล้วดูเป็นสามมิติ 57
<style type="text/css">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;}</style>