What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Clicking Hidden Radio Button


New member
Trying to click a hidden radio button, but it's making the image go all wonky. How to fix? Everything seems normal until you click. Then the image remains wonky even after you move the mouse pointer away.
  • The img-clip div constrains the size of the image.
  • The radio-button click area is meant to fill the img-clip region.
  • On hover, the img-clip scales up a little bit, and the image with it.

    <span class="team-member">
      <div class="img-clip">
        <label class="spotlight"
          >Option 1
          <input type="radio" name="team-member" />


        <span class="bio">
          Lana is a sewn-products supply chain guru.
          <a target="_blank" href="web.com">web/</a>

      <div class="caption">Lana</div>

.team-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

.team-member {
  text-align: center;
  /* height: 285px; */
  width: 250px;
  margin-bottom: 30px;

.team-member a {
  text-decoration: none;

.img-clip {
  height: 190px;
  width: 200px;
  overflow: hidden;
  border-radius: 10px 50px;
  border: solid;
  margin-bottom: 8px;
  background-color: black;
  transition: all 0.2s ease-in-out;

.img-clip:hover {
  border-color: lightskyblue;
  transform: scale(1.08);

.team-member img {
  width: 200px;
  /* margin-top: -5px; */

.caption {
  background: lightgoldenrodyellow;
  width: 200px;
  border-radius: 10px;
  border: solid;
  padding: 4px;

.bio {
  display: none;
  background-color: gray;
  opacity: 0.75;
  color: white;
  font-size: larger;

label.spotlight {
  padding: 100%;
  position: absolute;
  opacity: 10%;

Live demo

Asked on
i got the following answer on sitepoint:

You need position:relative on img-clip for the overflow hidden to hide absolute children and you also need to absolutely place the image to stop the page scrolling to the input when it focuses. Also your span wrapper should be a div.
It seems to work, but i'm unclear why the span should be a div.