Overlay on top of image - html

Question

I'm simply trying to add a button on hover but I'm stuck...
Is it possible to achive this only with CSS?? I'm using bootstrap if it helps
.card-img-top {
-webkit-filter: brightness(100%);
}
.card-img-top:hover {
-webkit-filter: brightness(40%);
-webkit-transition: all .15s ease-in-out
-moz-transition: all .15s ease-in-out
-o-transition: all .15s ease-in-out
-ms-transition: all .15s ease-in-out
transition: all .15s ease-in-out
}
<img class="card-img-top" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">

Answer 1

Yes, this is possible with CSS only. You could do it with a separate element with all the content in it (.overlay). This element is shown when there is a hover over the image-wrapper. I've used opacity and visibility together, so that a transition is possible (visibility, because opacity: 0 is still clickable).
Darkening the image can be done with a background color which is semi-transparent (rgba()). I've then positioned the wrapper of the two button elements inside the image with position absolute 50% and then moved it back half the height and width to make it appear exactly in the middle of the image. This can of course also be done with flexbox.
The two yellow buttons inside the button-wrapper are positioned next to each other with display: inline-block. If you do it like this, a line break is often added but can be removed by using white-space: nowrap.
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .overlay {
opacity: 1;
visibility: visible;
}
.overlay {
opacity: 0;
visibility: hidden;
transition: 0.3s ease all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
}
.overlay .button-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.overlay .button {
width: 50px;
height: 50px;
display: inline-block;
background: yellow;
margin: 20px;
border-radius: 100px;
}
.image {
max-width: 350px;
max-height: 350px;
}
<div class="wrapper">
<img class="image" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
<div class="overlay">
<div class="button-wrapper">
<div class="button"></div>
<div class="button"></div>
</div>
</div>
</div>