Img Box

// HTML

<div class="col-lg-4 col-md-4 col-sm-6">   // < .container .row
					<div class="single-work">
						<img src="img/work-1.jpg" alt="Name">
						<div class="item-hover">
							<div class="work-table">
								<div class="work-tablecell">
									<div class="hover-content">
										<h3>Name</h3>
										<p>Work-Work_Work</p>
										<a href="#" class="btn-work">Button</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
        
// CSS
.single-work
	display: flex
	justify-content: center
	position: relative
	overflow: hidden
	line-height: 24px

.single-work img
	max-width: 100%
	height: auto
	-webkit-transform: scale(1.15)
	transition: scale(1.15)
	-webkit-transition: all 0.4s ease 0s
	transition: all 0.4s ease 0s
	width: 634px 
	height: 583px 

.single-work:hover img
	-webkit-transform: scale(1)
	transform: scale(1)
	filter: grayscale(50%)

.item-hover
	font-size: 14px
	font-weight: normal
	padding: 30px
	height: 100%
	left: 0
	position: absolute
	top: 0
	width: 100%
	-webkit-transition: 0.4s
	transition: 0.4s
	z-index: 1
	opacity: 0
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	-webkit-transition: 0.6s
	transition: 0.6s

.item-hover:before
	position: absolute
	content: ""
	width: 100%
	height: 100%
	top: 0
	left: 0
	background: #000
	opacity: 0
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	visibility: hidden
	z-index: -1
	-webkit-transition: 0.4s
	transition: 0.4s

.single-work:hover .item-hover:before
	opacity: 0.7
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
	visibility: visible

.single-work:hover .item-hover
	opacity: 1
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"

.work-table 
	display: table
	height: 100%
	text-align: center
	width: 100%

.work-tablecell 
	display: table-cell
	vertical-align: middle

.hover-content h3 
	color: $backgroundcolor
	margin: 0

.hover-content p
	font-size: 12px
	text-transform: uppercase
	color: $backgroundcolor
	margin: 0

.hover-content h3
	margin-bottom: 10px
	font-weight: 500
	font-size: 22px
	text-transform: uppercase

.btn-work
	margin-top: 50px
	display: inline-block
	border: none
	color: #fff
	text-decoration: none
	background-color: $accent
	padding: 10px 35px
	font-size: 13px
	text-transform: uppercase
	font-weight: 600
	letter-spacing: 3px
	border-radius: 50px
	text-align: center
	position: relative
	outline: none
	transition: background-color .1s ease
	&::after
		transition: background-color .2s ease
		position: absolute
		content: ''
		height: 4px
		bottom: 0
		width: 100%
		background-color: darken($accent, 50%)
		opacity: .18
		border-bottom-left-radius: 2px
		border-bottom-right-radius: 2px
		left: 0
	&:focus, &:hover
		text-decoration: none
		color: #fff
	&:hover
		background-color: lighten($accent, 5%)
		&::after
			opacity: .22
	&:active
		background-color: darken($accent, 5%)
		&::after
			opacity: .32