Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS 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
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
 
Last edited:
It beats me how you can click a hidden radio button. How would you even find it, and even if you could, would the click do anything given the button is hidden ? What actually do you mean with "hidden" ? You may want to explain a bit better.

I tried your html/css code and while I see plenty of wonkiness I have no idea what you are trying to achieve here, or what exactly the issue is.
 
It beats me how you can click a hidden radio button. How would you even find it, and even if you could, would the click do anything given the button is hidden ? What actually do you mean with "hidden" ? You may want to explain a bit better.

I tried your html/css code and while I see plenty of wonkiness I have no idea what you are trying to achieve here, or what exactly the issue is.

The user only has to click the image. The radio button click area occupies the entire image range. The user doesn't know they're clicking a radio button, they only know they're clicking an image. More info:
 
I see. Nifty trick, I'll need to study it in more detail. So far it eludes me why you'd need to use it though, instead of just making the image clickable and have the click handler toggle the class or another attribute of the image.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom