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

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&w=1020" />
<h2>Daniel & 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&w=1020" />
<h2>Daniel & Lia</h2>
<h4>Couple</h4>
<blockquote>Words go here from what people have to say.</blockquote>
</figure>
</div>
</div>