Clicking Hidden Radio Button

[johnywhy]

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.

HTML

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

        <img
          loading="lazy"
          src="https://i.natgeofe.com/n/9d00782c-b410-4e9c-aeb5-564fa290bb82/ostrich_thumb_3x4.JPG"
          alt=""
        />

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

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

CSS

.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

PlayCode - Javascript Playground

playcode.io

Asked on
csscreator.com
freecodecamp.com
sitepoint

 

[johnywhy]

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.