syedanam
4/3/2017 - 5:11 PM

Hover With Image

Hover With Image

style.css
content_copyfile_download
body { 
	background: #e8e8e8;
	padding: 150px;
}
a {
	text-decoration: none !important;
}
.f1 {
font-family: 'Josefin Sans', sans-serif;
}
.f2 {
font-family: 'Hind Siliguri', sans-serif;
}
.fw-7 {
font-weight: 700 !important;
}

.head-title {
	padding-bottom: 50px;
}

/*আপনার প্রয়োজনীয় কোড এই জায়গা থেকে শুরু*/
.single-product {
	padding: 15px 0;
	border: 1px solid #ccc;
}

.img-box {
	padding: 0 10px;
	position: relative;
}
.img-box a {
	display: block;
}

.d-img {
	-webkit-transition: all .3s linear;
	transition: all .3s linear;
}

.hover-img {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	
	visibility: hidden;
	opacity: 0;
	
	-webkit-transition: all .3s linear;
	transition: all .3s linear;
}

.img-box:hover .hover-img {
	visibility: visible;
	opacity: 1;
}
.img-box:hover .d-img {
	visibility: hidden;
	opacity: 0;
}
hoverWithImage.html
content_copyfile_download
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri:700" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<div class="text-center">
		<h2 class="f2 head-title">এক ইমেজ এর উপর অারেক ইমেজ হোবার করব কিভাবে কেউ বলবেন প্লিজ....</h2>
	</div>
	
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				
				<!-- single-product start -->
				<div class="single-product text-center">
					<div class="img-box">
						<a href="#">
							<img src="https://static.daraz.com.bd/p/asus-9562-319441-1-catalog.jpg" alt="" class="d-img">
							<img src="https://static.daraz.com.bd/p/apple-4396-80187-1-catalog.jpg" alt="" class="hover-img">
						</a>
					</div>
					<div class="txt-box">
						<h2>
							<a href="#" class="btn btn-primary btn-lg text-capitalize text-primar f1 fw-7">porduct details</a>
						</h2>
					</div>
				</div>
				<!-- single-product end -->
				
			</div>
			<div class="col-md-4">
				
				<!-- single-product start -->
				<div class="single-product text-center">
					<div class="img-box">
						<a href="#">
							<img src="https://static.daraz.com.bd/p/asus-9562-319441-1-catalog.jpg" alt="" class="d-img">
							<img src="https://static.daraz.com.bd/p/apple-4396-80187-1-catalog.jpg" alt="" class="hover-img">
						</a>
					</div>
					<div class="txt-box">
						<h2>
							<a href="#" class="btn btn-primary btn-lg text-capitalize text-primar f1 fw-7">porduct details</a>
						</h2>
					</div>
				</div>
				<!-- single-product end -->
				
			</div>
			<div class="col-md-4">
				
				<!-- single-product start -->
				<div class="single-product text-center">
					<div class="img-box">
						<a href="#">
							<img src="https://static.daraz.com.bd/p/asus-9562-319441-1-catalog.jpg" alt="" class="d-img">
							<img src="https://static.daraz.com.bd/p/apple-4396-80187-1-catalog.jpg" alt="" class="hover-img">
						</a>
					</div>
					<div class="txt-box">
						<h2>
							<a href="#" class="btn btn-primary btn-lg text-capitalize text-primar f1 fw-7">porduct details</a>
						</h2>
					</div>
				</div>
				<!-- single-product end -->
				
			</div>
		</div>
	</div>
</body>
</html>