Cacher is the code snippet organizer for pro developers

<div class="container">
    <div class="row">
					<div class="col-xs-12 col-sm-4 slide-bottom">
						<div class="BGTitleCover text-center">
							<div class="Slide-Title">
								<h1>ROOFING</h1>     	
							</div>
							<img class="img-fluid" alt="{BusinessName} Images" src="https://ywpadmin.com/imageserver/AdminMedia/2019Media/Images/Widgets/300x300Roofing.png"/>
						</div>
					<div class="BGScreenOver">
							<div class="Slide-Body">
								<p>this is a test of text</p>
							</div>
							<a href="#" class="btn btn-primary btn-lg btn-block" role="button" aria-pressed="true">LEARN MORE</a>
						</div>
					</div>
        								<div class="col-xs-12 col-sm-4 slide-bottom">
						<div class="BGTitleCover text-center">
							<div class="Slide-Title">
								<h1>SIDING</h1></div>
							<img class="img-fluid" alt="{BusinessName} Images" src="https://ywpadmin.com/imageserver/AdminMedia/2019Media/Images/Widgets/300x300Siding.png"/>
						</div>
				<div class="BGScreenOver">
							<div class="Slide-Body">
								<p>this is a test of text</p>
							</div>
							<a href="#" class="btn btn-primary btn-lg btn-block" role="button" aria-pressed="true">LEARN MORE</a>
						</div>
					</div>
										<div class="col-xs-12 col-sm-4 slide-bottom">
						<div class="BGTitleCover text-center">
							<div class="Slide-Title"><h1>GUTTERS</h1></div>
							<img class="img-fluid" alt="{BusinessName} Images" src="https://ywpadmin.com//imageserver/AdminMedia/2019Media/Images/Widgets/300x300GutterScreen.png"/>
						</div>
						<div class="BGScreenOver">
							<div class="Slide-Body">
								<p>this is a test of text</p>
							</div>
							<a href="#" class="btn btn-primary btn-lg btn-block" role="button" aria-pressed="true">LEARN MORE</a>
						</div>
					</div>
    </div>
</div>

.row {
	margin: 100px 0;
}
h1 {
	 font-family: 'Lato', sans-serif;
	 font-weight: 700;
}
h2 {
	 font-family: 'Roboto', sans-serif;
		font-weight: 300;
}
body {
	background-color: #666;
}
body, p {
	 font-family: 'Roboto', sans-serif;
  font-size: 3.5vmin;
	 color: var(--accent-color);
}
h1 {
	color: var(--accent-color);
}
:root {
--accent-color:#EC1A2D; /* var(--accent-color) */
--contrast-color:#212121; /* var(--contrast-color) */
--accent-color-alpha:rgba(33,33,33,0.8); /* var(--accent-color-alpha) */
}
.btn-primary {
 background-color:var(--contrast-color);
	border-color:var(--contrast-color);
	filter: brightness(100%);
}

.btn-primary:hover{
	background-color:var(--contrast-color);
	border-color:var(--contrast-color);
	filter: brightness(70%);
}
.btn-primary:active {
 background-color:var(--contrast-color);
	border-color:var(--contrast-color);
	filter: brightness(100%);
}
.btn-primary:focus {
 background-color:var(--contrast-color);
	border-color:var(--contrast-color);
	filter: brightness(100%);
}



.Slide-Title {
	height: 22%;
	padding: 13px;
	background-color:var(--contrast-color);
}
.Slide-Body {
	height:86.5%;
	padding:25% 7%;
	background-color:var(--contrast-color);
}
.BGScreenOver, .BGTitleCover {
	height: 350px;
	width: 275px;
}
.BGScreenOver {
	background-color: var(--contrast-color);
transform: translateY(-100%);
position: absolute;
top: -100%;
}
.slide-bottom{
	margin-top: 25px;
	overflow: hidden;
	position: relative;
}
.slide-bottom:hover > .BGScreenOver {
	-webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 forwards;
	        animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 forwards;
}
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}