افکت گذاری برروی نوشته ها ...

[bazikadeh 1]

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

الان میخواهم وقتی موس بر روی عکس رفت یک افکتی صورت بگیرد (اکثر سایت ها دارند) ... ممنون میشوم 

[M.Javad 684]

سلام چه افکتی مد نظرتونه ؟! با هاور میشه خیلی کارا کرد مثلا تصویر کمی محو بشه یا حاشیه دورش عوض شه یا زوم بشه و ...

[bazikadeh 1]

هر افکتی باشد چه محو شود چه زوم و و و  

[M.Javad 684]

کد قالب رو قرار بدید فایل index.php

[bazikadeh 1]

<?php

get_header();
?>

<?php get_template_part('slider') ?>

<div id="primary" class="content-area">
	<div id="content" class="site-content" role="main">
		
		<div class="container">
			
			<h2 class="archive-title"><?php echo esc_html(siteorigin_setting('text_latest_posts', __("Latest Videos", 'focus'))) ?></h2>
			
			<?php get_template_part('loop') ?>
			
		</div>
	</div><!-- #content .site-content -->
	</div><!-- #primary .content-area -->

<?php get_footer(); ?>

 

[mk-73 165]

سلام خدمت دوست عزیز این ادرس یکی از این افکت هایی که شما میخوای، بعد شما همچنین میتونی با سرچ image hover eftectفکر کنم به تعداد زیادی از افکت های زیبا برخورد کنی موفق باشی

[M.Javad 684]

در 9 ساعت قبل، bazikadeh گفته است :

<?php

get_header();
?>

<?php get_template_part('slider') ?>

<div id="primary" class="content-area">
	<div id="content" class="site-content" role="main">
		
		<div class="container">
			
			<h2 class="archive-title"><?php echo esc_html(siteorigin_setting('text_latest_posts', __("Latest Videos", 'focus'))) ?></h2>
			
			<?php get_template_part('loop') ?>
			
		</div>
	</div><!-- #content .site-content -->
	</div><!-- #primary .content-area -->

<?php get_footer(); ?>

 

من در این کد تصویر شاخص یا تصویر دیگه ای نمیبینم آدرس سایت هم لطف بفرمایید

[bazikadeh 1]

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

از قالب focus استفاده میکنم

[bazikadeh 1]

در 9 ساعت قبل، mk-73 گفته است :

سلام خدمت دوست عزیز این ادرس یکی از این افکت هایی که شما میخوای، بعد شما همچنین میتونی با سرچ image hover eftectفکر کنم به تعداد زیادی از افکت های زیبا برخورد کنی موفق باشی

ممنونم ولی نشد ...

[mk-73 165]

دوست عزیز با این لینکی من خدمت شما معرفی کردم راحت میتونید افکت را اعمال کنید.بازم این را سرچ کنید در گوگل

image effect hover css3

روش کار هر کدام هم گفته شده بسیار ساده است.

این 3لینک هم جالب است

http://designshack.net/articles/css/joshuajohnson-2/

دمو:

http://designshack.net/tutorialexamples/imagehovers/index.html

http://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/

در مورد لینک اول تست شده وخودمم استفاده کردم کافی هست با کد سایت خودتون تطبیق دهید

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

برای زوم تصاویر کافیه این کد را قرار دهید برای تصاویر خودت

/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}

به جای کلاس growکلاس دایو ویا بخش تصاویر خود قرار دهید.

ویرایش شده دی 94 توسط mk-73

[bazikadeh 1]

در در 1/9/2016 at 17:55، mk-73 گفته است :

دوست عزیز با این لینکی من خدمت شما معرفی کردم راحت میتونید افکت را اعمال کنید.بازم این را سرچ کنید در گوگل

image effect hover css3

روش کار هر کدام هم گفته شده بسیار ساده است.

این 3لینک هم جالب است

http://designshack.net/articles/css/joshuajohnson-2/

دمو:

http://designshack.net/tutorialexamples/imagehovers/index.html

http://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/

در مورد لینک اول تست شده وخودمم استفاده کردم کافی هست با کد سایت خودتون تطبیق دهید

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

برای زوم تصاویر کافیه این کد را قرار دهید برای تصاویر خودت

/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}

به جای کلاس growکلاس دایو ویا بخش تصاویر خود قرار دهید.

مرسی 

ولی من از قالب http://hamyarwp.com/focus/ میخوام استفاده کنم .

 

[bazikadeh 1]

روش اضافه کردن به این قالب رو میگین ؟

[mk-73 165]

خب دوست عزیز کافیه جای کلاس کد بالا را با این کلاس عوض کنید:

.thumbnail-wrapper img

یعنی شما باید این کد را در فایل style.cssخود قرار دهید:

/*GROW*/
.thumbnail-wrapper img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.thumbnail-wrapper img:hover {
  width: 400px;
  height: 400px;
}

حالا افکت های دیگه هم به این شکل است کافیه جای کدهای افکت را عوض کنید.

موفق باشید

[bazikadeh 1]

در ۱ ساعت قبل، mk-73 گفته است :

خب دوست عزیز کافیه جای کلاس کد بالا را با این کلاس عوض کنید:

.thumbnail-wrapper img

 

 

کجا این رو قرار بدم ؟

[mk-73 165]

در 14 ساعت قبل، mk-73 گفته است :

/*GROW*/ .thumbnail-wrapper img { height: 300px; width: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .thumbnail-wrapper img:hover { width: 400px; height: 400px; }

کد بالا را در فایل style.cssخود قرار دهید.

[bazikadeh 1]

میدونم تئی استایل مشکلی نیست جایی که متن ها نمایش داده میشن چی کنم ؟

[bazikadeh 1]

???