JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fim-apresentacao">
            <h2>Um pouco mais...</h2>
            <div id="container-fim-ap">
				<figure>
					<input type="radio" id="espec1" name="especs" checked />
					<label for="espec1"></label>
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/2000px-Tux.svg.png" />
					<figcaption>Legenda da primeira imagem.</figcaption>
				</figure>
				<figure>
					<input type="radio" id="espec2" name="especs" />
					<label for="espec2"></label>
					<img src="http://cdn.wccftech.com/wp-content/uploads/2015/04/windows_logo.png" />
					<figcaption>Legenda da segunda imagem.</figcaption>
				</figure>
			</div>
        </div>

CSS

#container-fim-ap{
	border:solid 5px #ABB7B7;
	width:80%;
	word-wrap:break-word;
	border-radius:2%;
	/*visibility: hidden;*/
  position:relative;
}
#container-fim-ap figure{
	position: absolute;
	left:0;
}
#container-fim-ap figcaption{
	font-family: 'Arimo', sans-serif;
	font-weight: bold;
	float:left;
	color:black;
	font-size: 1em;
	width:35%;
	opacity:0;
	visibility: hidden;
	transition: .5s;
}
#container-fim-ap img{
	float:left;
	width:25%;
	transition: .5s;
	margin-right: 10px;
	opacity: 0;
	visibility: hidden;
	border-radius:2%;
}
#container-fim-ap input{
	display: none;
}

#container-fim-ap label{
	cursor:pointer;
	background:#2c3e50;
	border-radius:100%;
	height:1.5rem;
	width:1.5rem;
	display:block;
	z-index: 1;
	position:absolute;
  margin-top:40%;
}
#container-fim-ap figure:nth-child(1) label{
	left:1rem;
}
#container-fim-ap figure:nth-child(2) label{
	left:3.5rem;
}
#container-fim-ap figure input:checked ~ img{
	opacity:1;
	visibility: visible;
	z-index:1;
}

#container-fim-ap figure input:checked ~ figcaption{
	opacity:1;
	visibility: visible;
	z-index:1;
}

#container-fim-ap input:checked + label{
	background-color: #fff;
}

#container-fim-ap label:after{
	box-shadow: inset 0 0 0 .2em #111,
                inset 0 2px 2px #000,
                0 1px 1px hsla(0,0%,100%,.25);
    border-radius:100%;
    content:'';
    position:absolute;
    bottom:-.1em;
    top:-.1em;
    right:-.1em;
    left:-.1em;
}