Live Demo - Bootstrap 4 Image Hover Effect Example and Demo

See Free Live Demo example of How to display text on image hover ? we are help you for this. cool image hover effects css with bootstrap 4. image overlay hover effects with text. image hover effects with text and free source code. image hover border animation. We allows to free snippets of image hover effects bootstrap , you...

<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body class="bg-dark">
	<div class="container">
		<div class="row mt-5">
			<div class="col-md-12 col-12 rounded">
				<div class="row">
					<div class="col-md-4 col-12">
						<figure class="hover-box bg-dark text-white">
						  <img src="//nicesnippets.com/demo/iheb-photo-1.jpeg" alt="hover-box-first" class="w-100 img-thumbnail" />
						  <figcaption class="text-right">
						    <h3 class="bg-info p-1 mb-1">Bruno Jacklin</h3>
						    <h4>Web Designer</h4>
						  </figcaption>
						  <a href="//nicesnippets.com/"></a>
						</figure>
					</div>
					<div class="col-md-4 col-12">
						<figure class="hover-box bg-dark text-white">
							<img src="//nicesnippets.com/demo/iheb-photo-2.jpeg" alt="hover-box-second" class="w-100 img-thumbnail" />
							<figcaption class="text-right">
							    <h3 class="bg-info p-1 mb-1">Jason Holding</h3>
							    <h4>Web Developer</h4>
							</figcaption>
						  	<a href="//nicesnippets.com/"></a>
						</figure>
					</div>
					<div class="col-md-4 col-12">
						<figure class="hover-box bg-dark text-white">
							<img src="//nicesnippets.com/demo/iheb-photo-3.jpeg" alt="hover-box-third" class="w-100 img-thumbnail" />
						  	<figcaption class="text-right">
						    	<h3 class="bg-info p-1 mb-1">Mike Tison</h3>
						    	<h4>Seo Analyst</h4>
						  	</figcaption>
						  	<a href="//nicesnippets.com/"></a>
						</figure>
					</div>
				</div> 
			</div>
		</div>
	</div>
  </body>
</html>

body {
  font-family: 'Ropa Sans', sans-serif;
  margin-top: 200px;
}
.hover-box {
  position: relative;
  overflow: hidden;
}
.hover-box *, .hover-box:before, .hover-box:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.hover-box:before, .hover-box:after {
  position: absolute;
  top: 20px;
  right: 20px;
  content: '';
  background-color: #fff;
  z-index: 1;
  opacity: 0;
}
.hover-box:before {
  width: 0;
  height: 1px;
}
.hover-box:after {
  height: 0;
  width: 1px;
}
.hover-box figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 15px 20px;
}
.hover-box h3, .hover-box h4 {
  margin: 0;
  font-size: 1.1em;
  font-weight: normal;
  opacity: 0;
}
.hover-box h4 {
  font-size: .8em;
  text-transform: uppercase;
}
.hover-box a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.hover-box:hover img, .hover-box.hover img {
  zoom: 1;
  filter: alpha(opacity=20);
  -webkit-opacity: 0.2;
  opacity: 0.2;
}
.hover-box:hover:before, .hover-box.hover:before, .hover-box:hover:after, .hover-box.hover:after {
  opacity: 1;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
.hover-box:hover:before, .hover-box.hover:before {
  width: 40px;
}
.hover-box:hover:after, .hover-box.hover:after {
  height: 40px;
}
.hover-box:hover h3, .hover-box.hover h3, .hover-box:hover h4, .hover-box.hover h4 {
  opacity: 1;
}
.hover-box:hover h3, .hover-box.hover h3 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.hover-box:hover h4, .hover-box.hover h4 {
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}