کد ساخت عکس بزرگ شو -زوم عکس با رفتن ماوس روی ان

کد ساخت عکس بزرگ شو -زوم عکس با رفتن ماوس روی اناین کد به این صورته که بعد از رفتن ماوس روی عکس به صورت خودکار شروع به زوم شدن میکنه مقدار اندازه اولیه و مقدار زوم شدن رو در  کد میتوانید به دلخواه تغییر دهید.

اعداد ۴۰۰px ;height: 240px زمانی که زوم میشه رو  نشون میده ک چقد زوم بشه

width:140px;height:90px; مقدار اولیه که قبل از زوم شدن عکسها در حال نمایشه میتوانید در کد مشاهده و مقدار ان را کم و یا زیاد کنید.

کد ساخت عکس بزرگ شو

 

دمو کد

<div style="position:absolute;top:-200%;"><a  href="https://codebazan.ir/">&#1705;&#1583; &#1587;&#1575;&#1582;&#1578; &#1593;&#1705;&#1587; &#1576;&#1586;&#1585;&#1711; &#1588;&#1608;</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="کدبازان" />

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *