CSS3 দিয়ে image এর hover effect কিভাবে তৈরি করবেন ? – Creative IT Blog
Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611
Home / ওয়েব ডিজাইন / CSS3 দিয়ে image এর hover effect কিভাবে তৈরি করবেন ?

CSS3 দিয়ে image এর hover effect কিভাবে তৈরি করবেন ?

আমরা যারা ওয়েব ডিজাইন করি , ওয়েবসাইট কে সুন্দর করার জন্য ইমেজ এ বিভিন্ন Effect দেয়ার দরকার হয়। css3 দিয়ে এসব effect create করতে পারি। আজকে আমরা খুব সহজ একটা image hover effect শিখব। নিচে HTMLCSS এর code আলাদা আলাদা করে  দেয়া হল।
HTML CODE :
<DOCTYPE html>
<html>
<head>
<title> title goes here</title>
</head>
<body>
<div class=”product-img-hover product-item”>
<a href=”” class=”pro-image fix”>
<img src=”https://s-media-cache-ak0.pinimg.com/236x/c9/58/26/c958261dfed47aae34fbb3e26446ad0c.jpg” class=”img-responsive” alt=””>
</a><!– product img –>
<div class=”product-action-btn”>
<a href=”” class=”quick-view”>
<i class=”fa fa-search”></i>
</a>
<a href=”” class=”favorite”>
<i class=”fa fa-chain-broken”></i>
</a>
<a href=”” class=”add-cart”>
<i class=”fa fa-cart-plus”></i>
</a>
</div><!– product descrption –>
</div><!– main div for img –>
</body>
</html>
CSS CODE :
.product-item {
overflow: hidden;
margin: 20px auto;
}
.product-img-hover {
width: 300px;
height:300px;
position: relative;
background-color: antiquewhite;
padding: 10px 20px;
}
.pro-image {
display: block;
position: relative;
}
.pro-image img{
width: 100%;
}
.pro-image::before {
background: #4598a7 none repeat scroll 0 0;
content: “”;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
width: 100%;
z-index: 99;
}
.product-item:hover .pro-image::before {
opacity: 0.6;
}
.product-action-btn {
height: auto;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
z-index: 99;
}
.product-action-btn a {
background: #fff none repeat scroll 0 0;
display: block;
font-size: 16px;
line-height: 40px;
margin-bottom: 5px;
text-align: center;
transform: translateX(-100%);
width: 40px;
}
.product-action-btn a:last-child {
margin-bottom: 0;
}
.product-action-btn a:hover {
background: #E09E25 none repeat scroll 0 0;
color: #fff;
}
.product-action-btn a.quick-view {
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.product-action-btn a.favorite {
-webkit-transition: all 0.6s ease 0s;
-o-transition: all 0.6s ease 0s;
transition: all 0.6s ease 0s;
}
.product-action-btn a.add-cart {
-webkit-transition: all 0.9s ease 0s;
-o-transition: all 0.9s ease 0s;
transition: all 0.9s ease 0s;
}
.product-item:hover .product-action-btn a {
transform: translateX(30px);
}
OUTPUT :
img-hover

উপরের এইচটিএমএল এবং সিএসএস code  গুলো copy করে যেকোনো editor ( notepad++, Dreamweaver , Brackets  ) এ নিয়ে paste করলে Output এর চিত্রটির মত দেখতে পাবেন। পরবর্তীতে css3 এর আর ও  কাজ দেখানো হবে। আশা করি সবাই উপকৃত হবেন। ধন্যবাদ সবাইকে।

About sakeba

Check Also

html list

ওয়েব ডিজাইন Part-9( HTML list)

 HTML list: একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । …