.hs-news-box {
position: relative;
padding: 0;
text-indent: 0;
list-style-type: 0;
margin-bottom: 3%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.33);
border-radius: 4px;
overflow: hidden;
width: 100%;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url(//dokumentacja.humansoft.pl/wp-content/plugins/wedocs/templates/img/screenshot.png);
transition: 1s all;
}
.hs-news-box::after {
content: '';
display: block;
float: left;
background: linear-gradient(180deg, rgba(0,0,0,0.0) 10%, rgba(0,0,0,0.7) 100%);
width: 100%;
height: 100%;
position: absolute;
top: 0;
margin: 0;
padding: 0;
left: 0;
}
.hs-news-box:hover {
background-position: top left;
}
.hs-news-box h3 {
position: relative;
z-index: 3;
color: white;
text-align: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-shadow: 0px 2px 2px rgba(0,0,0,0.66);
width: 80%;
}
.news-element{
background-color: #F5F8FA; 
color: white; 
padding: 25px; 
text-align: center;
margin-bottom: 20px;
}
.news-element button {
display: inline-flex;
align-items: center;
padding: .2rem 1.2rem;
border: 2px solid #00a0e3;
border-radius: 0.4rem;
color: #00a0e3;
background-color: transparent;
transition: all .2s cubic-bezier(.4,.5,.5,1);
outline: 0;
}
.news-element h3{
padding: 15px;
color: #00a0e3;
}
.news-element button:hover {
color: #fff;
background-color: #00a0e3;
}
.news-element a {
text-decoration: none;
}
.news-element a:hover {
text-decoration: none;
}