Clicking Hidden Radio Button

1 reply [Last post]

Fri, 2022-12-23 16:01

johnywhy

Offline

Regular

Last seen: 23 weeks 3 days ago

Timezone: GMT-8

Joined: 2010-03-11

Posts: 27

Points: 37

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%;
}

Tags:

Fri, 2022-12-23 16:03