کد تصاویری که با بردن ماوس روی آنها بزرگ می شوند

این کد کاملا بر اساس سی اس اس سه ساخته شده که ممکنه داخل بعضی مرورگر ها مثل اینترنت اکسپلورر عملکرد ناقصی داشته باشه. این کد زیبا که توسط CSS طراحی شده تمام عکس هایی که در کلاس are هستند را بدین صورت در میاره و باعث حرفه ای شدن تصاویر شما میشه.

<style> .are img { border:1px solid #c0c0c0; max-width: 480px; margin:5px; padding:0px; -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; -o-transition:all 0.2s ease-in; transition:all 0.2s ease-in; -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.9); box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.9); -webkit-transform: scale(0.950); -moz-transform: scale(0.950); -o-transform: scale(0.950); } .are img:hover { max-width: 480px; margin-left:5px; transform: scale(1.4); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); } </style> <div style="display:none"><a href="http://moisrex.r98.ir/">کد عکس</a><a href="http://moisrex.rozblog.com/">کد تصویر</a></div> <div class="are"> <img alt="" src="http://moisrex.rozblog.com/user/Avatar/moisrex/webuser/file/img/216966.jpg"> <img alt="" src="http://moisrex.rozblog.com/user/Avatar/moisrex/webuser/file/img/216966.jpg"> <img alt="" src="http://moisrex.rozblog.com/user/Avatar/moisrex/webuser/file/img/216966.jpg"> <img alt="" src="http://moisrex.rozblog.com/user/Avatar/moisrex/webuser/file/img/216966.jpg"> <img alt="" src="http://moisrex.rozblog.com/user/Avatar/moisrex/webuser/file/img/216966.jpg"> </div>