1

I'm a very newbie to styling using CSS. I'm trying to add an Image card as a radio button. I referred to multiple articles in SO and using Codepen.

I tried the following:

  • Wrap a standard radio input within a label

  • Within this label, just after the input type="radio", now add a simple div styled as a card

console.log($(".test:checked").val())
/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 20%;
  height: 20%;
}

/* IMAGE STYLES */
[type=radio] + card {
  cursor: pointer;
  width: 20%;
  height: 20%;
}

/* CHECKED STYLES */
[type=radio]:checked + card {
  outline: 2px solid #f00;
  width: 20%;
  height: 20%;
}


/* Section */
section {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cards {
    display: flex;
}

.card {
    position: relative;
    width: 17rem;
    height: 17rem;
    margin: .5rem;
    border: 1px solid #EEE;
    border-radius: 1rem;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: background-size .4s;
}

.card:hover {
    background-size: 110%;
}

.card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    opacity: 0;
    background-color: rgba(255, 255, 255, .3);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    transition: .2s;
}

.card:hover::before {
    opacity: 1;
    filter: blur(5px);
    background-size: 110%;
}

.card .title {
    opacity: 0;
    font-size: 12px;
    padding: 1rem;
    transform: translateY(13.5rem);
    transition: .2s;
}

.card:hover .title {
    opacity: 1;
    transform: translateY(13rem);
}

.card.dark .title {
    color: white
}

.card.loan-business,
.card.loan-business::before {
    background-image: url("https://image.freepik.com/free-vector/bank-loan-small-business-flat-vector-concept_81522-3733.jpg");
}

.card.loan-personal,
.card.loan-personal::before {
    background-image: url("https://www.loanqubes.com/campaign/new-personal/images/banner-vector.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
<section>
    <ul class="cards">
            <li class="card loan-business">
                    <label>
                        <input type="radio" name="test" id="test" value="business">
                    </label>
                    <div class="title">
                            <h3>Business Loan</h3>
                    </div>
            </li>
            <li class="card loan-personal">
                    <label>
                        <input type="radio" name="test" id="test" value="personal">
                    </label>
                    <div class="title">
                            <h3>Personal Loan</h3>
                    </div>
            </li>
    </ul>
</section>

Thanks for your time and consideration.

Maqsud
  • 739
  • 3
  • 12
  • 35

1 Answers1

1

Your code works, but the hit area for the radio inputs was too small and didn't match the size of the .card elements. To fix this set their width and height in CSS to 100%.

Also note that the JS you were using to test needed to be amended to listen for the change event on the radios, not just output on page load. In addition you had duplicated the same #test id which is not valid HTML, as the values must be unique. I changed them to classes to address this.

$('.test').on('change', e => console.log(e.target.value));
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

[type=radio]+card {
  cursor: pointer;
  width: 20%;
  height: 20%;
}

[type=radio]:checked+card {
  outline: 2px solid #f00;
  width: 20%;
  height: 20%;
}

section {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards {
  display: flex;
}

.card {
  position: relative;
  width: 17rem;
  height: 17rem;
  margin: .5rem;
  border: 1px solid #EEE;
  border-radius: 1rem;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: background-size .4s;
}

.card:hover {
  background-size: 110%;
}

.card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  opacity: 0;
  background-color: rgba(255, 255, 255, .3);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  transition: .2s;
}

.card:hover::before {
  opacity: 1;
  filter: blur(5px);
  background-size: 110%;
}

.card .title {
  opacity: 0;
  font-size: 12px;
  padding: 1rem;
  transform: translateY(13.5rem);
  transition: .2s;
}

.card:hover .title {
  opacity: 1;
  transform: translateY(13rem);
}

.card.dark .title {
  color: white
}

.card.loan-business,
.card.loan-business::before {
  background-image: url("https://image.freepik.com/free-vector/bank-loan-small-business-flat-vector-concept_81522-3733.jpg");
}

.card.loan-personal,
.card.loan-personal::before {
  background-image: url("https://www.loanqubes.com/campaign/new-personal/images/banner-vector.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<section>
  <ul class="cards">
    <li class="card loan-business">
      <label>
        <input type="radio" name="test" class="test" value="business" />
      </label>
      <div class="title">
        <h3>Business Loan</h3>
      </div>
    </li>
    <li class="card loan-personal">
      <label>
        <input type="radio" name="test" class="test" value="personal" />
      </label>
      <div class="title">
        <h3>Personal Loan</h3>
      </div>
    </li>
  </ul>
</section>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339