eafar1366

hover effect for image

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

لینک فیلتر میباشد

0

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


لینک به پست

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

دوستان بهترین راه برای گذاشتن hover effect در عکس ها چیست مانند این لینک می خوام

http://tympanus.net/...kTriggerCircle/

اگه از بهترین منظورتون راحت تره استفاده از css

و اگه زیبایی هستش استفاده jquery

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

ویرایش شده در توسط alireza.nh
0

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


لینک به پست

اگه از بهترین منظورتون راحت تره استفاده از css

و اگه زیبایی هستش استفاده jquery

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

ممنون آیا کسی می تونه کمک کنه تا image link هایی که توو یه چند تا از صفحات میزارم از این jquery استفاده بشه؟

0

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


لینک به پست

نمونه:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/*
* CSS3 Flip
*/
.thumb.flip {
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;
}

.thumb.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -moz-transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
width:20px;
}

.thumb.flip .thumb-detail {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.thumb.flip img,
.thumb.flip .thumb-detail {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

.thumb.flip .flipIt:hover {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
/*-----pro-----*/
</style>
</head>
<body>
<div class="thumb flip ">
<div class="thumb-wrapper flipIt">tests</div>
</div>
</body>
</html>

1

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


لینک به پست

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

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

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

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


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

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

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


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