Clicking Hidden Radio Button

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

https://playcode.io/1043822

Asked on

https://csscreator.com

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.

Because div can’t be a child of span: <span>: The Content Span element - HTML: HyperText Markup Language | MDN

1 Like

The fix i posted above didn’t seem to fix the problem. I set radio z-index: 100, and opacity: 100 , just so i could see if it’s getting clicked, and then i saw the same problem with the image as before. Changing the span to div didn’t fix it.
https://playcode.io/1044374

Changing span to div had only semantic meaning. It wasn’t intended to change anything.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.