CSS3 দিয়ে image এর hover effect কিভাবে তৈরি করবেন ? - প্রিয়লেখা

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

sakeba
Published: August 29, 2016

আমরা যারা ওয়েব ডিজাইন করি , ওয়েবসাইট কে সুন্দর করার জন্য ইমেজ এ বিভিন্ন 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 এর আর ও  কাজ দেখানো হবে। আশা করি সবাই উপকৃত হবেন। ধন্যবাদ সবাইকে।