আমরা যারা ওয়েব ডিজাইন করি , ওয়েবসাইট কে সুন্দর করার জন্য ইমেজ এ বিভিন্ন Effect দেয়ার দরকার হয়। css3 দিয়ে এসব effect create করতে পারি। আজকে আমরা খুব সহজ একটা image hover effect শিখব। নিচে HTML ও CSS এর 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 :
উপরের এইচটিএমএল এবং সিএসএস code গুলো copy করে যেকোনো editor ( notepad++, Dreamweaver , Brackets ) এ নিয়ে paste করলে Output এর চিত্রটির মত দেখতে পাবেন। পরবর্তীতে css3 এর আর ও কাজ দেখানো হবে। আশা করি সবাই উপকৃত হবেন। ধন্যবাদ সবাইকে।