کد ساخت عکس بزرگ شو -زوم عکس با رفتن ماوس روی ان
کد ساخت عکس بزرگ شو -زوم عکس با رفتن ماوس روی اناین کد به این صورته که بعد از رفتن ماوس روی عکس به صورت خودکار شروع به زوم شدن میکنه مقدار اندازه اولیه و مقدار زوم شدن رو در کد میتوانید به دلخواه تغییر دهید.
اعداد ۴۰۰px ;height: 240px زمانی که زوم میشه رو نشون میده ک چقد زوم بشه
width:140px;height:90px; مقدار اولیه که قبل از زوم شدن عکسها در حال نمایشه میتوانید در کد مشاهده و مقدار ان را کم و یا زیاد کنید.
<div style="position:absolute;top:-200%;"><a href="https://codebazan.ir/">کد ساخت عکس بزرگ شو</a></div><style>.imm img{margin-top:10px;margin-left:10px;transition: width 1s , height 1s ;-codebazan-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;-codebazan-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;}}@-codebazan-keyframes myfirst{0% {box-shadow: 0px 0px 2px;-codebazan-box-shadow: 0px 0px 2px;}50% {box-shadow: 0px 0px 15px;-codebazan-box-shadow: 0px 0px 15px;}100% {box-shadow: 0px 0px 2px;-codebazan-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>
<!----هر عکس تو این کلاس قرار بگیره زوم میشه --->
<center class="imm">
<img src="https://codebazan.ir/logo.png"alt="کدبازان" />