Text on image - Project Process

by Matthew Day

HTML

<div id="quiz-container" class="wrap">
		<div class="col-6">
			<div class="flip-card flip-it">
				<div class="flip-card-inner">
					<div id="front-1" class="flip-card-front">
						<div class="box">
							<p>What is CDIFF?</p>
						</div>
					</div>
					<div id="back" class="flip-card-back">
						<ul class="question q1" id="container">
			  				<li class="false">
			    				<input type="radio" id="one" name="q1" value="false" class="q1a">
			    				<label class="q1a" for=one>A virus that greatly suppresses the immune system.</label>
							</li>
							<br>  
			  				<li class="false">
			    				<input type="radio" id="two" name="q1" value="false" class="q1b">
			    				<label class="q1b" for=two>An airborne pathogen that causes respiratory distress.</label>
							</li>
							<br>
							<div class="containerForAnswer">
			  					<li>
			    					<input type="radio" id="three" name="q1" value="true" class="q1c">
			    					<label class="q1c" for=three>A bacterium that can cause symptoms ranging from diarrhea to life-threatening inflammation of the colon.</label>
								</li>
							</div>
							<br>  
			  				<li class="false">
			    				<input type="radio" id="four" name="q1" value="false" class="q1d">
			    				<label class="q1d" for=four>An epithelial condition that may result in ulcers.</label>
			  				</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="flip-card flip-it">
				<div class="flip-card-inner">
					<div id="front-2" class="flip-card-front">
						<div class="box" id="box-2">
							<p>At any given time, how many estimated cases of infections acquired in healthcare settings are there in the world?</p>
						</div>
					</div>
					<div id="back" class="flip-card-back">
						<ul class="question q2" id="container">
			  				<li>
			    				<input type="radio" id="five" name="q2" value="true" class="q2a">
			    				<label class="q2a" for=five>Over 1.4 million cases</label>
							</li>
							<br>
			  				<li...

CSS

.quiz-questions,
.question {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.question {
  line-height: 22px;
}

.wrap {
  margin: 0 auto;
  width: 90%;
}

.highlight {
  font-style: italic;
  text-decoration: underline;
}

input {
  display: none;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 40vh;
  perspective: 1000px;
  display: inline-block;
  margin: 12px 0;
}

@media only screen and (min-width: 768px) {
  .flip-card {
    flex: 0 0 calc(50% - 24px);
    margin: 12px;
  }
}

.flip-card-inner {
  position: relative;
  width: 50%;
  /* min-width: 300px; */
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 2%;
}

.flip-it:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  backface-visibility: hidden;
  border-radius: 2%;
  padding: 0 14px;
  width: 100%;
}

.flip-card-front {
  z-index: 2;
}

.flip-card-back {
  background-color: #9EC8F9;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* width: 50%; */
}

#front-1 {
  background: url("http://placekitten.com/g/300/200");
  background-repeat: no-repeat;
  background-size: cover;
  height: 0;
  overflow: hidden;
  padding-top: 66.67%;
}

#front-2 {
  background: url("http://placekitten.com/g/300/200");
  background-repeat: no-repeat;
  background-size: cover;
  height: 0;
  overflow: hidden;
  padding-top: 66.67%;
}

#front-3 {
  background: url("http://placekitten.com/g/300/200");
  background-repeat: no-repeat;
  background-size: cover;
  height: 0;
  overflow: hidden;
  padding-top: 66.67%;
}

#front-4 {
  background: url("http://placekitten.com/g/300/200");
  background-repeat: no-repeat;
  background-size: cover;
  height: 0;
  overflow: hidden;
  padding-top:...