دنبال کردن




ایجاد افکت بر روی تصاویر با استفاده از HTML و CSS





farsoft logo
فرسافت

داشتن یک ظاهر زیبا برای سایت می تواند نظر مخاطب را بهتر جلب کند و سایت شما را حرفه ای تر به نمایش بگذارد. یکی از روش های زیبا سازی سایت ایجاد افکت های زیبا بر روی تصاویر می باشد.


ما در این مقاله چندین روش استفاده از افکت بر روی عکس ها را با استفاده HTML و CSS آماده کردیم. برای استفاده میتوانید کد ها را کپی کرده و در سایت تان استفاده کنید.

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

بدون افکت
بدون افکت
بدون افکت
بزرگ نمایی
بزرگ نمایی
بزرگ نمایی
کوچک نمایی
کوچک نمایی
کوچک نمایی
چرخش + کوچک نمایی
چرخش + کوچک نمایی
چرخش + کوچک نمایی
محو کردن
محو کردن
محو کردن
سیاه و سفید
سیاه و سفید
سیاه و سفید
رنگ سوبیایی
رنگ سوبیایی
رنگ سوبیایی
محو کردن + سیاه و سفید
محو کردن + سیاه و سفید
محو کردن + سیاه و سفید
تغییر وضوح 1
تغییر وضوح 1
تغییر وضوح 1
تغییر وضوح 2
تغییر وضوح 2
تغییر وضوح 2
فلش زدن
فلش زدن
فلش زدن
درخشیدن 1
درخشیدن 1
درخشیدن 1
درخشیدن 2
درخشیدن 2
درخشیدن 2
{{ html }}


<div class="column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>بدون افکت</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>بدون افکت</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>بدون افکت</span>
	</div>
</div><br><br>
<div class="hover01 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>بزرگ نمایی</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>بزرگ نمایی</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>بزرگ نمایی</span>
	</div>
</div><br><br>
<div class="hover03 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>کوچک نمایی</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>کوچک نمایی</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>کوچک نمایی</span>
	</div>
</div><br><br>
<div class="hover06 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>چرخش + کوچک نمایی</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>چرخش + کوچک نمایی</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>چرخش + کوچک نمایی</span>
	</div>
</div><br><br>
<div class="hover07 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>محو کردن</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>محو کردن</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>محو کردن</span>
	</div>
</div><br><br>
<div class="hover08 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>سیاه و سفید</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>سیاه و سفید</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>سیاه و سفید</span>
	</div>
</div><br><br>
<div class="hover09 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>رنگ سوبیایی</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>رنگ سوبیایی</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>رنگ سوبیایی</span>
	</div>
</div><br><br>
<div class="hover10 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>محو کردن + سیاه و سفید</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>محو کردن + سیاه و سفید</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>محو کردن + سیاه و سفید</span>
	</div>
</div><br><br>
<div class="hover11 column">

	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span> تغییر وضوح 1</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>تغییر وضوح 1</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>تغییر وضوح 1</span>
	</div>
</div><br><br>
<div class="hover12 column">

	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>تغییر وضوح 2</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>تغییر وضوح 2</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>تغییر وضوح 2</span>
	</div>
</div><br><br>
<div class="hover13 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>فلش زدن</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>فلش زدن</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>فلش زدن</span>
	</div>
</div><br><br>
<div class="hover14 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>درخشیدن 1</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>درخشیدن 1</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>درخشیدن 1</span>
	</div>
</div><br><br>
<div class="hover15 column">
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/bird.jpg" class="img-responsive"/>
		</figure>
		<span>درخشیدن 2</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/flower.jpg" class="img-responsive"/>
		</figure>
		<span>درخشیدن 2</span>
	</div>
	<div>
		<figure><img src="http://farsoft-group.ir/images/trainings/web/css-image-hover-effect/car.jpg" class="img-responsive"/>
		</figure>
		<span>درخشیدن 2</span>
	</div>
</div>
    
    
    

{{ css }}

      @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}
h1,
h1+p {
	margin: 30px 15px 0;
	font-weight: 300;
}
h1+p a {
	color: #333;
}
h1+p a:hover {
	text-decoration: none;
}
h2 {
	margin: 60px 15px 0;
	padding: 0;
	font-weight: 300;
}
h2 span {
	margin-left: 1em;
	color: #aaa;
	font-size: 85%;
}
.column {
	margin: 15px 15px 0;
	padding: 0;
}
.column:last-child {
	padding-bottom: 60px;
}
.column::after {
	content: '';
	clear: both;
	display: block;
}
.column div {
	position: relative;
	float: left;
	width: 300px;
	height: 200px;
	margin: 0 0 0 25px;
	padding: 0;
}
.column div:first-child {
	margin-left: 0;
}
.column div span {
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: -1;
	display: block;
	width: 300px;
	margin: 0;
	padding: 0;
	color: #444;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0;
}
figure {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
figure:hover+span {
	bottom: -36px;
	opacity: 1;
}



/* Zoom In #1 */
.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

/* Zoom In #2 */
.hover02 figure img {
	width: 300px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover02 figure:hover img {
	width: 350px;
}

/* Zoom Out #1 */
.hover03 figure img {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover03 figure:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* Zoom Out #2 */
.hover04 figure img {
	width: 400px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover04 figure:hover img {
	width: 300px;
}

/* Slide */
.hover05 figure img {
	margin-left: 30px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover05 figure:hover img {
	margin-left: 0;
}

/* Rotate */
.hover06 figure img {
	-webkit-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover06 figure:hover img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

/* Blur */
.hover07 figure img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover07 figure:hover img {
	-webkit-filter: blur(0);
	filter: blur(0);
}

/* Gray Scale */
.hover08 figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover08 figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/* Sepia */
.hover09 figure img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover09 figure:hover img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

/* Blur + Gray Scale */
.hover10 figure img {
	-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover10 figure:hover img {
	-webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
}

/* Opacity #1 */
.hover11 figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover11 figure:hover img {
	opacity: .5;
}

/* Opacity #2 */
.hover12 figure {
	background: #1abc9c;
}
.hover12 figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover12 figure:hover img {
	opacity: .5;
}

/* Flashing */
.hover13 figure:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

/* Shine */
.hover14 figure {
	position: relative;
}
.hover14 figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover14 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

/* Circle */
.hover15 figure {
	position: relative;
}
.hover15 figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.hover15 figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

این مطلب را به اشتراک بگذارید



دیدگاه خود را درباره این مطلب بنویسید: