Pop up Enlarge image css code

css ကုဒ္ေလးေတြနဲ႔ Bolgger မွာ ကစားလိုသူမ်ား အတြက္ပါ

• 
  ဘူးေရမ်က္ရြာ
• 
  css code မ်ား စမ္းၾကည့္ျခင္း
• 
  မ်က္စိေနာက္ေအာင္လုပ္တာ

css code

ul.enlarge{ list-style-type:none; /*remove the bullet point*/ margin-left:0; } ul.enlarge li{ display:inline-block; /*places the images in a line*/ position: relative; z-index: 0; /*resets the stack order of the list items - later we'll increase this*/ margin:10px 40px 0 20px; } ul.enlarge img{ background-color:#eae9d4; padding: 6px; -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); box-shadow: 0 0 6px rgba(132, 132, 132, .75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } ul.enlarge span{ position:absolute; left: -9999px; background-color:#eae9d4; padding: 10px; font-family: 'Droid Sans', sans-serif; font-size:.9em; text-align: center; color: #495a62; -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); -moz-box-shadow: 0 0 20px rgba(0,0,0, .75); box-shadow: 0 0 20px rgba(0,0,0, .75); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; } ul.enlarge li:hover{ z-index: 50; cursor:pointer; } ul.enlarge span img{ padding:2px; background:#ccc; } ul.enlarge li:hover span{ top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/ left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/ } ul.enlarge li:hover:nth-child(2) span{ left: -100px; } ul.enlarge li:hover:nth-child(3) span{ left: -200px; } /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/ ul.enlarge img, ul.enlarge span{ behavior: url(pie/PIE.htc); }

html code

<ul class="enlarge">
    <li><img src="assets/image-enlarge01-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" alt="Deckchairs" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    <li><img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" alt="Blackpool sunset" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    <li><img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    </ul>