Trying to have it so all the images are centered within the flex box and all images are also inline with one another (aka the center of each image is along the same axis). I know this is probably pretty basic, but I'm very new to this and have been trying different permutations for an hour.
<body><h3>Course</h3><form class="mk8dx-entry-form"><div class="course-container"><div class="console-container"><div class="console-row"><label class="console-image-check"><input type="radio" name="console" value="SNES" onclick="snesCourses();"><div class="console-image"><img src="https://placehold.co/600x400" alt="Super Mario Kart"></div></label><label><input type="radio" name="console" value="N64" onclick="n64Courses();"><div class="console-image"><img src="https://placehold.co/600x200" alt="Mario Kart 64"></div></label><label><input type="radio" name="console" value="GBA" onclick="gbaCourses();"><div class="console-image"><img src="https://placehold.co/600x300" alt="Mario Kart Super Circuit"></div></label><label><input type="radio" name="console" value="GCN" onclick="gcnCourses();"><div class="console-image"><img src="https://placehold.co/600x500" alt="Mario Kart Double Dash"></div></label><label><input type="radio" name="console" value="DS" onclick="dsCourses();"><div class="console-image"><img src="https://placehold.co/600x400" alt="Mario Kart DS"></div></label><label class="console-image-check"><input type="radio" name="console" value="Wii" onclick="wiiCourses();"><div class="console-image"><img src="https://placehold.co/600x250" alt="Mario Kart Wii"></div></label><label><input type="radio" name="console" value="3DS" onclick="mk7Courses();"><div class="console-image"><img src="https://placehold.co/600x400" alt="Mario Kart 7"></div></label><label><input type="radio" name="console" value="Tour" onclick="tourCourses();"><div class="console-image"><img src="https://placehold.co/600x500" alt="Mario Kart Tour"></div></label><label><input type="radio" name="console" value="MK8" onclick="mk8Courses();"><div class="console-image"><img src="https://placehold.co/600x400" alt="Mario Kart 8"></div></label><label><input type="radio" name="console" value="Booster Courses" onclick="boosterCourses();"><div class="console-image"><img src="https://placehold.co/600x200" alt="Mario Kart 8 Deluxe Booster Courses"></div></label></div></div></div></form></body>.course-container { width: 60%; height: 300px; padding-left: 20px; padding-right: 20px; background-color: black;}.console-container { height: 100%; display: flex; gap: 20px; align-items: center; justify-content: space-around;}.console-row { display: flex; gap: 30px;}.console-row label { flex: 1;}.console-image img { cursor: pointer; display: block; width: 100%; object-fit: contain; opacity: 50%; transition: transform 250ms ease-in-out;&:hover { opacity: 80%; transition: opacity 250ms ease-in-out; }}input[type="radio"]{ visibility: hidden; height: 0; width: 0; }.console-row input[type=radio]:checked + .console-image img{ opacity: 100%; transform: scale(1.1); filter: drop-shadow(0px 0px 10px hsla(0, 0%, 0%, 0.75)); transition: transform 250ms ease-in-out, filter 250ms ease-in-out;}Here's a link to a Codepen mockup
I tried this
.console-image img { cursor: pointer; display: inline-block; vertical-align: middle; width: 100%; object-fit: contain; opacity: 50%; transition: transform 250ms ease-in-out;&:hover { opacity: 80%; transition: opacity 250ms ease-in-out; }}But it looks like the hidden radios are still messing with the vertical alignment.