رفتن به مطلب
فرهاد

درخواست جی کوئری برای تصاویر

پست های پیشنهاد شده

سلام

در بعضی سایت ها مثل سایت های فروشگاهی در پست هاشون از یه افکتی استفاده کردن که با رفتن موس بروی پست کادر سفید میشه و دو یا چند آیکون ظاهر میشه که

با کلیک یا وارد پست میشی یا تصویر با وضوح بالاتر نمایش دادهمیشه یا پسند میکنی مطلب و...

اسم این افکت چیه؟

منبعی هست برای دریافت؟

به اشتراک گذاری این ارسال


لینک به ارسال

سلام

نمونه آنلاین بزارید ببینیم چیه :)

به اشتراک گذاری این ارسال


لینک به ارسال

این سایتو ببینید


http://www.utarh.ir/

وسط صفحه قسمت چند طرح تصادفی موس رو ببرین روی تصاویر

منبعی هست که این افکت ها رو داشته باشه

تا به الان چندین مدل متفاوت در سایت ها دیدم

اما نمیدونم اسمش چیه

به اشتراک گذاری این ارسال


لینک به ارسال

افزونه احتیاج نداره این دو تصویر را در پوشه ی images قالبتون ذخیره کنید

post-336-0-14723900-1398625958.png

post-336-0-35657000-1398625992.png

و کدهای زیر را در sdtyle.css


.imageGallery {
display:block;
margin-right:auto;
margin-left:auto;
width:800px;
padding:10px;
border:1px #aaa solid;
text-align:center;
}
.imageGallery .imgInner {
display:inline-block;
position:relative;
height:160px;
width:240px;
margin:5px;
background:#D6D6D6;
}
.imageGallery .imgInner .imgBlock {
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
height:150px;
width:230px;
overflow:hidden;
}
.imageGallery .imgInner .imgBlock img {
width:230px;
height:150px;
}
.imageGallery .imgInner .imgBlock .zoom {
content:url("images/zoom-icon.png");
position:absolute;
zoom:0;
left:-62px;
top:160px;
-moz-transition: all .3s linear .2ms;
-o-transition:all .3s linear .2ms;
-webkit-transition: all .3s linear .2ms;
transition: all .3s linear .2ms;
}
.imageGallery .imgInner .imgBlock:hover .zoom {
zoom:1;
left:38px;
top:60px;
}
.imageGallery .imgInner .imgBlock .more {
content:url("images/readmore-icon.png");
position:absolute;
zoom:0;
right:-62px;
-moz-transition: all .3s linear .2ms;
-o-transition:all .3s linear .2ms;
-webkit-transition: all .3s linear .2ms;
transition: all .3s linear .2ms;
top:160px;
}
.imageGallery .imgInner .imgBlock:hover .more {
zoom:1;
right:38px;
top:60px;
}

و تصاویر را در کدهایی شبیه کد زیر لود کنید


<div class="imageGallery">
<div class="imgInner">
<div class="imgBlock">
<img src="images/img1.jpg" />
<a href="#" class="zoom"></a><a href="#" class="more"></a>
</div>
</div>
<div class="imgInner">
<div class="imgBlock">
<img src="images/img2.jpg" />
<a href="#" class="zoom"></a><a href="#" class="more"></a>
</div>
</div>
<div class="imgInner">
<div class="imgBlock">
<img src="images/img3.jpg" />
<a href="#" class="zoom"></a><a href="#" class="more"></a>
</div>
</div>
<div class="imgInner">
<div class="imgBlock">
<img src="images/img4.jpg" />
<a href="#" class="zoom"></a><a href="#" class="more"></a>
</div>
</div>
<div class="imgInner">
<div class="imgBlock">
<img src="images/img5.jpg" />
<a href="#" class="zoom"></a><a href="#" class="more"></a>
</div>
</div>
<div class="imgInner">
<div class="imgBlock">
<img src="images/img6.jpg" />
<a href="#" class="zoom"></a><a href="#" class="more"></a>
</div>
</div>
</div>

به اشتراک گذاری این ارسال


لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


×
×
  • اضافه کردن...