Flexbox

by elizabethkmathew

HTML

<ul class="case-study-list">
  <li class="case-study-item">
    <a class="cs-link"><span class="cs-img"></span></a>
    <h4 class="cs-title">test</h4>
    <p class="cs-tagline">Lorem Ipsum is simply dummy text of...</p>
  </li>
  <li class="case-study-item">
    <a class="cs-link"><span class="cs-img"></span></a>
    <h4 class="cs-title">test1</h4>
    <p class="cs-tagline">Lorem Ipsum is simply dummy text of...</p>
  </li>
  <li class="case-study-item">
    <a class="cs-link"><span class="cs-img"></span></a>
    <h4 class="cs-title">test2</h4>
    <p class="cs-tagline">Lorem Ipsum is simply dummy text of...</p>
  </li>
  <li class="case-study-item">
    <a class="cs-link"><span class="cs-img"></span></a>
    <h4 class="cs-title">test4</h4>
    <p class="cs-tagline">Lorem Ipsum is simply dummy text of...</p>
  </li>
</ul>

SCSS

.case-study-list {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		padding: 0 0 30px;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		.case-study-item {
			list-style-type: none;
			min-width: 180px;
			padding: 30px 20px 0;
			-webkit-flex: 1 1 180px;
			-ms-flex: 1 1 180px;
			flex: 1 1 180px;
			.cs-link {
				display: inline-block;
				.cs-img {
					background-position: center center;
          background-image: url('http://vollrath.com/ClientCss/images/VollrathImages/No_Image_Available.jpg');
					background-repeat: no-repeat;
					border-radius: 50%;
					cursor: pointer;
					display: inline-block;
					position: relative;
					width: 150px;
					height: 150px;
					&:after,
					&:before {
						position: absolute;
            content: "";
					}
					&:before {
						background-color: rgba(37, 74, 84, 0.9);
						border-radius: 50%;
						bottom: 0;
						left: 0;
						opacity: 0.9;
						right: 0;
						top: 0;
					}
					&:after {
						background: transparent url('../../../assets/images/casestudy-pdf-icon.png') center center no-repeat;
						display: inline-block;
						height: 60px;
						left: 50%;
						margin-left: -25px;
						margin-top: -30px;
						top: 50%;
						width: 50px;
						background-size: 35px 43px;
						@media (min-width: 1024px) {
							background-size: 50px 60px;
						}
					}
				}
				&:hover {
					.cs-img {
						&:after,
						&:before {
						  transition: all 0.25s cubic-bezier(0.25,0.1,0.25,1);
							
						}
						&:before {
							background-color: rgba(59, 180, 34, 0.85);
						}
						&:after {
							background: none;
							color: #fff;
							content: "Read More";
							font: 16px 'Montserrat-Bold';
							height: 100%;
							left: 50px;
							margin-left: 0;
							margin-top: 0;
							text-decoration: underline;
							text-transform: uppercase;
							top: calc(50% - 12px);
							width:...