How to make a button with an image background? - css

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

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.

Answer 2

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 3

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>