Advice on my opacity slider (Pure CSS, No JS)

Question

I have created this pen for an opacity slider that I want to use for client testimonials. I based the CSS of the testimonials off another pen which I could link here if someone would like it. I am very new to coding and am an extreme beginner so pardon my silly mistakes. :P Does anyone have any advice on how to improve this design and how to make it more versatile for once I add more testimonials (maybe 6-8). I am sort of confused by the animation properties and how they are working, i.e the delay and the animation duration. I just kept playing with the numbers until it worked. I plan to have this "slider" in the footer of my site. One thing that bugs me is that it is not centered. How could I center the slider? Also what should I do about the height of the "slider"? The way I am currently doing it doesn't really make sense. Kind of like a lot of that code.

Thanks so so much for any advice given, I strongly appreciate it. :)

Here is the link to my Codepen: [link] (http://codepen.io/ericshio/pen/grzboq)

HTML:

<div class="test-slider">
<div class="test-slide">
<figure class="test">
<img class="img-circle img-border" src="http://www.themainconcept.com/wp-content/uploads/2016/04/eric.png" width="40%"/>
<h2>Eric S.</h2>
<h4>Some Guy</h4>
<blockquote>Insert cheesy quote here! Lorem ipsum dolor sit amet, at lorem graecis ius, qui at veri vocent.</blockquote>

</figure>
</div>
<div class="test-slide">
    <figure class="test">
<img class="img-circle img-border" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
<h2>Daniel &amp; Lia</h2>
<h4>Couple</h4>
<blockquote>Words go here from what people have to say.</blockquote>
</div>
</div>

CSS:

.test-slider {
    width: 25em;
    height: 25em;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.test-slide {
    position: absolute;
    animation: 30s slider infinite;
    -webkit-animation: 30s test-slider infinite;
    opacity: 0;
}

@keyframes test-slider {
    10% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

div.test-slide:nth-child(0) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

div.test-slide:nth-child(1) {
    animation-delay: 15s;
    -webkit-animation-delay: 15s;
}

figure.test {
    font-family: lato !important;
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10% 1%;
    min-width: 15em;
    max-width: 20em;
    width: 100%;
    color: #000000;
    text-align: center;
    font-size: 1em;
    background-color: #2d2d2d;
    padding: 8% 8% 8% 8%;
    background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
   -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
}

figure.test img {
    width: 50%;
    margin-top: 0;
    margin-bottom: 2%;
}

figure.test h2, figure.test h4 {
    font-family: lato;
    text-transform: none;
    margin: 0;
}

figure.test h2 {
    font-weight: bold;
    color: white;
}

figure.test h4 {
    font-weight: normal;
    color: #a6a6a6;
}

figure.test blockquote {
    margin-top: 5%;
    margin-bottom: 0;
    padding: 8%;
    opacity: 1;
    font-style: italic;
    font-size: 1em;
    background-color: white;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
    text-align: left;
    position: relative;
}

.img-border {
    border: 0.5em solid tan;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}

.img-circle {
    margin: auto;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

blockquote, blockquote:before, blockquote:after, blockquote::before, blockquote::after {
    margin: auto;
    border: none;
    position: initial;
    content: " ";
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote {
}

blockquote:before {
    content: open-quote;
}

blockquote::before, blockquote::after {
    display: inline;
}

blockquote:after {
    content: close-quote;
}

JS:

NONE >:)

Answer 1

What's more important than just to give you the solution is to help you actually see that your element in fact is centered.

I like using red when I debug CSS code, so try putting:

.test-slider {
    border: 1px solid red;
}

---

Now, you probably see for yourself that .test-slider is indeed centered, but its child,.test-slide, is anchored on the top left corner of its parent and since the parent is larger in width, it therefore seems to be off.

To fix that, just set:

.test-slider {
    width: 20.4em; /* Instead of 25em */
}

Since .test-slider is invisible and just serves to wrap .test-slide, you don't really care about its width, so this solution is fine.

Another way to do it is by setting:

.test-slide {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

---

Since you use position: absolute on .test-slide instead of position: relative, you will not face any problems. If later you want to change it to position: relative, you can just set:

.test-slide {
    display: inline-block;
    margin: 0 auto;
}

Or you could even better set:

.test-slider { /* The parent */
    text-align: center;
}

---

Check out the following fiddles for a more visual representation:

• With the first solution → here.
• With the second solution → here.

Snippet:

.test-slider {
	width: 20.4em;
	height: 30em;
	overflow: hidden;
	position: relative;
  margin: 0 auto;
}

.test-slide {
	position: absolute;
	animation: 30s slider infinite;
	-webkit-animation: 30s test-slider infinite;
	opacity: 0;
}

@keyframes test-slider {
	10% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

div.test-slide:nth-child(0) {
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

div.test-slide:nth-child(1) {
	animation-delay: 15s;
	-webkit-animation-delay: 15s;
}

figure.test {
	font-family: lato !important;
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10% 1%;
	min-width: 15em;
	max-width: 20em;
	width: 100%;
	color: #000000;
	text-align: center;
	font-size: 1em;
	background-color: #2d2d2d;
	padding: 8% 8% 8% 8%;
	background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0.3em 0.3em 0.3em 0.3em;
}

figure.test img {
	width: 50%;
	margin-top: 0;
	margin-bottom: 2%;
}

figure.test h2, figure.test h4 {
	font-family: lato;
	text-transform: none;
	margin: 0;
}

figure.test h2 {
	font-weight: bold;
	color: white;
}

figure.test h4 {
	font-weight: normal;
	color: #a6a6a6;
}

figure.test blockquote {
	margin-top: 5%;
	margin-bottom: 0;
	padding: 8%;
	opacity: 1;
	font-style: italic;
	font-size: 1em;
	background-color: white;
	border-radius: 0.3em 0.3em 0.3em 0.3em;
	box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
	text-align: left;
	position: relative;
}

.img-border {
	border: 0.5em solid tan;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}

.img-circle {
	margin: auto;
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

blockquote, blockquote:before, blockquote:after, blockquote::before, blockquote::after {
  margin: auto;
	border: none;
	position: initial;
	content: " ";
	quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
	content: open-quote;
}

blockquote::before, blockquote::after {
	display: inline;
}

blockquote:after {
	content: close-quote;
}

<div class="test-slider">
  <div class="test-slide">
    <figure class="test">
      <img class="img-circle img-border" src="http://www.themainconcept.com/wp-content/uploads/2016/04/eric.png" width="40%" />
      <h2>Eric S.</h2>
      <h4>Some Guy</h4>
      <blockquote>Insert cheesy quote here! Lorem ipsum dolor sit amet, at lorem graecis ius, qui at veri vocent.</blockquote>

    </figure>
  </div>
  <div class="test-slide">
    <figure class="test">
      <img class="img-circle img-border" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <h2>Daniel &amp; Lia</h2>
      <h4>Couple</h4>
      <blockquote>Words go here from what people have to say.</blockquote>
    </figure>
  </div>
</div>