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

این کد زیبا با استفاده از سی اس اس سه طراحی شده و ممکن است با بعضی مرورگر ها مانند اینترنت اکسپلورر مشکل داشته باشد.

این کد CSS عکس ها را چشمک زن می کند و همچنین با بردن ماوس روی عکس تصویر بزرگ می شود. در این کد هر تصویر که گذاشته شود به اندازه 140 × 90 پیکسل در می آید و با بردن ماوس روی آن به 400 × 240 پیکسل تغییر اندازه می دهد.

<style> .imm img{ margin-top:10px; margin-left:10px; transition: width 1s , height 1s ; -moz-transition: width 1s, height 1s; -webkit-transition: width 1s, height 1s; -o-transition: width 1s, height 1s; width: 140px; height: 90px; box-shadow: 0px 0px 10px black; border-radius: 5px; animation:myfirst 0.5s infinite; -moz-animation:myfirst 0.5s infinite; -webkit-animation:myfirst 0.5s infinite; } .imm img:hover{ box-shadow: 0px 0px 10px black; width: 400px ; height: 240px ; box-shadow: 0px 0px 10px black; border-radius: 5px; } @keyframes myfirst { 0% {box-shadow: 0px 0px 2px;-o-box-shadow: 0px 0px 2px;-ms-box-shadow: 0px 0px 2px;-khtml-box-shadow: 0px 0px 2px;} 50% {box-shadow: 0px 0px 15px;-o-box-shadow: 0px 0px 15px;-ms-box-shadow: 0px 0px 15px;-khtml-box-shadow: 0px 0px 15px;} 100% {box-shadow: 0px 0px 2px;-o-box-shadow: 0px 0px 2px;-ms-box-shadow: 0px 0px 2px;-khtml-box-shadow: 0px 0px 2px;} } @-moz-keyframes myfirst { 0% {box-shadow: 0px 0px 2px;-moz-box-shadow: 0px 0px 2px;} 50% {box-shadow: 0px 0px 15px;-moz-box-shadow: 0px 0px 15px;} 100% {box-shadow: 0px 0px 2px;-moz-box-shadow: 0px 0px 2px;} } @-webkit-keyframes myfirst { 0% {box-shadow: 0px 0px 2px;-webkit-box-shadow: 0px 0px 2px;} 50% {box-shadow: 0px 0px 15px;-webkit-box-shadow: 0px 0px 15px;} 100% {box-shadow: 0px 0px 2px;-webkit-box-shadow: 0px 0px 2px;} } </style> <div style="display:none"><a href="http://moisrex.r98.ir/">کد تصاویر زیبا</a><a href="http://moisrex.rozblog.com/">کد تصاویر زیبا</a></div> <center class="imm"> <img src="http://moisrex.rozblog.com/user/Avatar/moisrex/webuser/file/img/216966.jpg" alt="کد عکس" /> </center>