How to make a button with an image background?

Question

I am using bootstrap 3 and I want to make an image button i.e. the button should have:

• an image background
• The button should have a custom translucent dark overlay that lightens on hover and becomes even darker on click.
• fixed height (of 300px), and width 100% (so that it occupies the entire parent div class="col-md-4").
• The image should be cropped i.e. overflow: hidden

I tried to achieve this by setting the image as background to my parent <div> and used a child <div> for the translucent overlays. But I had to write a lot of jquery to change the states onhover, onclick, etc.

I realized I should be using a button, and not a div but I could not style it and make it overlay the parent div.

Current code:

HTML element:

<div class="col-md-4" style="background-image: url('...'); overflow: hidden; height: 200px; margin-bottom: 24px">
  <div class="img-panel translucent-overlay-light"> <!-- Should be a button or a tag -->
    <div>
        Hello
    </div>
  </div>
</div>

javascript: (ideally there should be no js, all this should be done in CSS)

$('.img-panel').click(function() {
    // do something
});

$('.img-panel').mouseenter(function() {
    var elm = $(this);
    elm.removeClass('translucent-overlay-light');
    elm.addClass('translucent-overlay-dark')
}).mouseleave(function() {
    var elm = $(this);
    elm.removeClass('translucent-overlay-dark');
    elm.addClass('translucent-overlay-light')
});

Also, I am using SCSS anyway so both SCSS and CSS answers are fine.

Answer 1

CSS only with pseudo-elements. Hope that works for you.

.col{
  width:50%;
  display:block;
}

.img-panel{
  position:relative;
  height: 200px;
  background-image: url('https://placeimg.com/640/480/any');
  background-size:cover;
  color:white;
}

.img-panel:after{
  content:"";
  width:100%;
  height:100%;
  top:0;
  left:0;
  position:absolute;
  transition:0.2s;
}

.img-panel:hover:after{
  background:rgba(0,0,0,0.5) ;
}

.img-panel:active:after{
  background:rgba(0,0,0,0.8) ;
}

<div class="col col-md-4">
  <div class="img-panel translucent-overlay-light">
        Hello
  </div>
</div>

Answer 2

As I understood, you need something like that, please check this. It's pure CSS solution.

.btn-wrap {
  .btn-wrap__input {
     width: 100%;
     height: 300px;
     position: absolute;
     z-index: 3;
     margin: 0;
     opacity: 0;
     &:checked {
       + .btn-wrap__overlay {
         opacity: .7;
       }
       &:hover {
         + .btn-wrap__overlay {
           opacity: .7;
         }  
       }
     }
     &:hover {
      + .btn-wrap__overlay {
         opacity: .5;
       }
    }
  }
  .btn-wrap__button {
    height: 300px;
    width: 100%;
  }
  .btn-wrap__back {
    position: absolute;
    height: 300px;
    width: 100%;
    z-index: 1;
    color: white;
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7ixV_dB22rsPTNwbph6uHl62bSSNHK_TQLw1gMOPmoWErkRdK');
    
  }
  .btn-wrap__overlay {
    background: black;
    opacity: 0;
    height: 300px;
    position: absolute;
    z-index: 2;
    width: 100%;
  }
}

<div class="col-md-4 btn-wrap">
  <div class='btn-wrap__button'>
    <input type='checkbox' class='btn-wrap__input'>
    <div class="btn-wrap__overlay"></div>
    <div class="btn-wrap__back"></div>
  </div>
</div>

Answer 3

Not hard, just using css:

.my-button {
    display: block;
    position: relative;
    height: 300px;
    line-height: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
    text-align: center;
    box-shadow: 0 0 2px rgba(0, 0, 0, .2);
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    background: url('https://placeholdit.imgix.net/~text?txtsize=23&bg=22ffdd&txtclr=000000&txt=&w=250&h=250');
}
.my-button::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, .4);
}
.my-button:hover::after {
    background: rgba(0, 0, 0, .2);
}
.my-button:active::after {
    background: rgba(0, 0, 0, .8);
}

<div class="my-button">
    Click me
</div>

You just may need to adjust background image size and position, read more.