این ماژول رو میخوام!:(

[ali110haji 10]

سلام.. اسم ایم ماژول چیه(عکس زبر) که وقتی روش میری.. بزرگ میشه!( مثل سایته joomla.ir)

از کجا میتونم ماژول مثل این دانلود کنم؟

[bahrambaba 15]

این احتمالا ماژول نیست و با کد های css ایجاد شده.... تو انجمن روش بحث زیاد شده و نمونه های زیادی هم دوستان ارائه کرده اند. یک سرچ بزنید .

[ali110haji 10]

این احتمالا ماژول نیست و با کد های css ایجاد شده.... تو انجمن روش بحث زیاد شده و نمونه های زیادی هم دوستان ارائه کرده اند. یک سرچ بزنید .

خب با چه اسمی سرچ کنم؟ کلا اسم این افزونه چیه؟

میشه لینک بدید؟

[Vahid Taheri 74]

این افزونه نیست بلکه کد هست و با سی اس اس بهش استایل داده شده.

قبلا توی انجمن مطرح شده بود ولی عنوان تاپیک رو یادم نیست(مثلا الان برای این تاپیک معلوم نیست باید از چه واژه ای استفاده کرد)

این کد های css افکت بزرگ شونده هست:

#navidiranian-circles {
   float: left;
   height: 128px;
   position: relative;
   width: 950px;
   z-index: 99;
}
#navidiranian-circle {
   float: left;
   height: 128px;
   left: 0;
   overflow: hidden;
   position: absolute;
   transition: all 400ms ease-in-out 400ms;
   width: 128px;
   z-index: 999;
}
#navidiranian-circle:hover {
   height: 290px;
   margin: -50px -80px 0;
   transition-delay: 0ms;
   width: 290px;
}
#navidiranian-circle1 {
   float: left;
   height: 128px;
   left: 205px;
   overflow: hidden;
   position: absolute;
   transition: all 400ms ease-in-out 400ms;
   width: 128px;
   z-index: 999;
}
#navidiranian-circle1:hover {
   height: 290px;
   margin: -50px -80px 0;
   transition-delay: 0ms;
   width: 290px;
}
#navidiranian-circle2 {
   float: left;
   height: 128px;
   left: 410px;
   overflow: hidden;
   position: absolute;
   transition: all 400ms ease-in-out 400ms;
   width: 128px;
   z-index: 999;
}
#navidiranian-circle2:hover {
   height: 290px;
   margin: -50px -80px 0;
   transition-delay: 0ms;
   width: 290px;
   z-index: 999;
}
#navidiranian-circle3 {
   float: left;
   height: 128px;
   left: 615px;
   overflow: hidden;
   position: absolute;
   transition: all 400ms ease-in-out 400ms;
   width: 128px;
   z-index: 999;
}
#navidiranian-circle3:hover {
   height: 290px;
   margin: -50px -80px;
   transition-delay: 0ms;
   width: 290px;
}
#navidiranian-circle4 {
   float: left;
   height: 128px;
   left: 820px;
   overflow: hidden;
   position: absolute;
   transition: all 400ms ease-in-out 400ms;
   width: 128px;
   z-index: 999;
}
#navidiranian-circle4:hover {
   height: 290px;
   margin: -50px -80px;
   transition-delay: 0ms;
   width: 290px;
}
#navidiranian-circle-ins {
   margin: 0 auto;
   overflow: hidden;
   text-align: justify;
}
#navidiranian-circle-image {
   height: 80px;
   margin: 25px auto;
   position: relative;
   width: 64px;
}
.circle-img {
   float: left;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
#navidiranian-circle-ins p {
   color: #FFFFFF;
   direction: rtl;
   font-size: 12px;
   height: 110px;
   margin: 20px auto 0;
   opacity: 0;
   overflow: hidden;
   position: relative;
   text-align: center !important;
   text-shadow: 1px 1px 0 #484848;
   transition: all 200ms ease-in-out 200ms;
   width: 80%;
}
#navidiranian-circle-ins p a {
   background-clip: border-box;
   background-color: #A9ADB1;
   background-image: url("../images/button_bg.png"), url("../images/button_bg.png"), radial-gradient(circle at center bottom , #C5C7CA 0px, rgba(197, 199, 202, 0) 100px), linear-gradient(#C5C7CA, #92989C);
   background-position: left bottom, right top, 0 0px, 0 0;
   border: 1px solid #A5A5A5 !important;
   border-radius: 8px 8px 8px 8px;
   box-shadow: 0 0 1px #FFFFFF inset;
   color: #525252 !important;
   padding: 7px 10px;
   text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
   transition: all 1s ease 0s;
}
#navidiranian-circle-ins p a:hover {
   background-color: #B6BBC0;
   background-image: url("../images/button_bg.png"), url("../images/button_bg.png"), radial-gradient(circle at center bottom , #CACDD0 0px, rgba(202, 205, 208, 0) 100px), linear-gradient(#D1D3D6, #9FA5A9);
   background-position: left top, right bottom, 0 0px, 0 0;
}
#navidiranian-circle-ins:hover p {
   margin-top: -20px;
   opacity: 1;
}

البته اون خطوط کدهای جدایی دارند.کدهای html هم به آسانی میتونید با فایرباگ یا سورس استخراج کنید .

موفق باشید

[NimaT 14]

با سلام

از این لینک ها می تونید استفاده کنید اینها دمو هستند و لینک دانلود هم دارند

http://www.inwebson.com/demo/hover-effects-with-css3-animations/#mainholder

http://www.inwebson.com/demo/css3-transitions-fancy-hover-effects/demo1/

[NimaT 14]

در واقع سایت

http://www.inwebson.com

مرجع کامل این جور کد هاست

[saber 208]

دوستان راهنمایی لازم رو کردن اینم همون کدها که قبلا انجمن قرار داده شده بود

http://jupload.ir/do.php?filename=joomlaforum.ir_13578587271.zip