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

Asked on

csscreator.com
freecodecamp.com

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.

.img-clip {
  height: 190px;
  width: 200px;
  position:relative;
  overflow: hidden;
  border-radius: 10px 50px;
  border: solid;
  margin-bottom: 8px;
  background-color: black;
  transition: all 0.2s ease-in-out;
}
.team-member img {
  width: 200px;
  position:absolute;
  left:0;
  top:0;
  /* margin-top: -5px; */
}

Also your span wrapper should be a div :slight_smile:

Thanks for that!

Why should the span be a div?

A span is an in-line element and is not allowed to have block children like divs. It’s an invalid structure and also semantically incorrect.

Spans cannot receive dimensions and ignore vertical margins and vertical padding will overflow the line height unless the display of the span is changed to a block display or a block positioning scheme.

1 Like

That actually didn’t seem to fix it. 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.

Sorry I forgot about the click on the radio. The code just hid it.

The problem is the padding:100% on the label so instead of that just make the label fit the space like this and then there will be no scroll inside the overflow:hidden element.

.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;
  position: relative;
}

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

.team-member img {
  width: 200px;
  position: absolute;
  left: 0;
  top: 0;
}

.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 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
}
1 Like

Can the span’s behavior be changed with CSS to accommodate block children?

My understanding is that an empty div will create a newline in the render, but a span will not. I’m using the span to define a node, and i don’t want the span itself to have any display effects by itself.

Fantastic! See here how i’m using the radio-button “hack”. It’s used in a client-side templating system that i’m developing. View the console so you can see it in action.

Later, the clicks will be used to display an expanding info panel for the item clicked. More info on the checkbox hack. I’m using radio instead of checkbox, because we should only display one info panel at a time.

1 Like

The span can display anyway you like with CSS but it is still not allowed to hold block elements like divs. :slight_smile:

You can make it display:block and it will behave just like a div but that doesn’t change the fact that its an inline element that is not allowed to hold block level elements because that is defined in the html specification. Indeed if you did add display block to the span then it may well have been a div in the first place (which it should be),

Html says a span is not allowed to hold block element which is why it’s classes as invalid.

All elements have an inline display by default. Its the UA stylesheet that assigns display characteristics to them. Don’t confuse block elements with their display properties. They are different things. Display properties are csss and elements are html.

Html defines the structure and CSS designs the look. There is no conflict.

You can set your div to display:inline and then it will behave like an inline element but you won’t be able to apply dimensions to it and padding and margins will be treated differently.

In the structure you posted that span wrapper needs to be a div and will have no impact on your layout.

Your span class=“bio” would also be more suited to a div or p or a more semantic element. ( Indeed it looks like a figure and figcaption structure would be a more semantic for this type of html but now I’m going a bit off topic :slight_smile: )

Yes the checkbox hack can be useful in some cases to avoid using js and hopefully you will supply some indication that something needs to be clicked in order for something to happen :slight_smile:

Glad you are making progress :slight_smile:

1 Like

Curious now about figure and figcaption structure. This node needs flexibility for different layouts. My intention is, on click, to show a large panel, displayed in the center of the screen, with image thumbnail Name, Title, Bio, and Link. The layout of those elements may be revised over time. Would figure and figcaption lend itself well to that?

I’ll indicate that something should be clicked by scale-up and glow on hover, and a pointer icon.

.spotlight:hover{
cursor: pointer;
}

It’s quite a simple structure which you can see here.

Assuming you mean you will show the bio element on top of that little image then you will need to move the checkbox out of the label so that the bio element and the input are siblings. The checkbox hack works by selecting siblings that are adjacent (+) or lower down the html (~). You would then associate the label and the input using the for attribute to match the inputs unique id.

If you were thinking of showing a modal on the middle of the page then the inputs would need to be siblings of the body instead as you won’t be able to show a position:fixed modal from inside an overflow:hidden element. where a parent has a transform applied (as in your hover rule). The element will appear when you mouse away if you have clicked it but nothing will happen when you are actually hovering the element. :slight_smile:

Here’s an example with figure and figcaption and working checkbox hack.

It needs to be a checkbox because you need to be able to turn it off again if using a modal effect like the above. You can never click two at the same time anyway as the modal stop that from happening.

1 Like

Sweet! But i want to show some of the same elements in the modal as i show on the page, incl name and image.

The easiest solution would be to duplicate the information in the bio div otherwise it will get messy.

With the structure in my codepen you could actually target any elements you want and place them on top of the modal but you would need to control the flow as they will be independent of the bio text. If it’s only a word or two then you could preserve space at the top and bottom of the modal.

Then of course you will have the issue of the content in the original pic disappearing when it appears in the modal. That could look a little odd.

Or to avoid duplicate content use a data attribute to pass on the text.

e.g.

1 Like

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