Payam.Hayati

تغییر انداز عکس با Css ؟

آغاز شده توسط: Payam.Hayati,

11 پست در این موضوع

ارسال شده در

سلام عزیزان

چطور میتونم با Css کدی رو تولید کنم که وقتی کاربر موس رو بر روی تصویر مورد نظر می برد تصویر بزرگتر شود.

Share this post

Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

ارسال شده در (ویرایش شده)

یه همچین کدی میتونید استفاده کنید:

.img_resize{
width:50%;
}

.img_resize:hover{
width: 200%;
}

البته کیفیت عکس هم مهمه

معمولا باید 2 عکس باشه یکی thumbnail و دیگری سایز اصلی و سایز اصلی رو موقع ماوس هاور لود کرد (البته نمونه های js اش زیاده)

اینم یه نگاهی بندازید... اون پایین مورد شما رو هم دموش رو داره روی مربعه میرید بزرگ میشه خیلی جالبه افکت های انیمیشنش

http://www.the-art-of-web.com/css/css-animation/

ویرایش شده در توسط Mahboobe.Maleki
افزودن لینک

Share this post

Link to post
Share on other sites

ارسال شده در

کد فوق باعث میشه تصویر به یکباره در ابعاد داده شده به نمایش در بیاد.

اگر بخوایم به صورت آرام این تغییر شکل بگیره چه کدی باید اضافه کرد؟

در لینک داده شده در قسمت Animating your Transforms این حالت وجود دارد اما نحوه استفاده از عناصر داده شده در کد را به عنوان مثال درج نکردن.

در سایت http://www.w3schools.com هم حالت های دیگر بررسی شدن از جمله های لایت کردن.

Share this post

Link to post
Share on other sites

ارسال شده در

این کد رو تست کن 

.img_resize{
width:50%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}

.img_resize:hover{
width: 200%;
}

Share this post

Link to post
Share on other sites

ارسال شده در

این کد رو تست کن 

.img_resize{
width:50%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}

.img_resize:hover{
width: 200%;
}

این کد رو تست کن 

.img_resize{
width:50%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}

.img_resize:hover{
width: 200%;
}

این کدهای فایل HTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Zoom CSS</title>
<link rel="stylesheet" href="http://www.ahvazsell.com/Test/style-1.css">
</head>
<body>

<div id="img:hover">
<img src="http://www.ahvazsell.com/Test/img-contact.jpg" />
</div>

</body>
</html>

و این کدهای فایل CSS :

img:resize{
width:50%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}


img:hover
{
width: 100%;
height: 40%;
}

فقط قسمت img:hover انجام میشه.

کد فوق رو برای اعمال قسمت Resize به این شکل تغییر دادم :

<div id="img:hover">
<div id="img:resize">
<img src="http://www.ahvazsell.com/Test/img-contact.jpg" />
</div></div>

اما توفیقی حاصل نشد.

لینک آزمایش کدها

Share this post

Link to post
Share on other sites

ارسال شده در

بجای اینایی که نوشتی:

<div id="img:hover"> <div id="img:resize"> <img src="http://www.ahvazsell.com/Test/img-contact.jpg" /> </div></div>

اینو بزار:

<div class="img"> <div class="img"> <img src="http://www.ahvazsell.com/Test/img-contact.jpg" /> </div></div>

Share this post

Link to post
Share on other sites

ارسال شده در

کدها رو تغییر دادم :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Zoom CSS</title>
<link rel="stylesheet" href="http://www.ahvazsell.com/Test/style-1.css">
</head>
<body>

<div class="img"> <div class="img"> <img src="http://www.ahvazsell.com/Test/img-contact.jpg" /> </div></div>

</body>
</html>

فایل Css :

.img:resize
{
width:50%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}


.img:hover
{
width: 100%;
height: 40%;
}

اما همچنان حالت قبل پا برجاست :33:

Share this post

Link to post
Share on other sites

ارسال شده در

چرا وقتی در ماژول HTML دستی کد رو اعمال می کنم برای تمام تصاویر حالت Css به کار برده میشه؟:13:

می خواستم فقط در position31-35 اعمال بشه ، اما بر روی تمام تصاویر سایت اعمال میشه.

سایت

Share this post

Link to post
Share on other sites

ارسال شده در

اون لینکی که گذاشتم و گفتید که نحوه استفاده ش چطوریه ، از transform: scale(2) استفاده کرده :

.showoff2, .showoff:hover {
   border-color: red;
   border-radius: 1em 1em 1em 1em;
   transform: scale(2);
}

.showoff2:hover {
   border-color: green;
   border-radius: 0 0 0 0;
   transform: scale(1);
}

http://www.the-art-of-web.com/css/css-animation/

Share this post

Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


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