John Weiss
Coder
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.
CSS
Live demo
https://playcode.io/1043822
Asked on
- 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: