How to make an overlay element responsive? - css

Question

I have a video gallery of thumbnails in bootstrap 3. Each thumbnail has a text overlay that appears on mouse hover. This all works fine but I am now trying to add a play icon to the overlays. The problem is that whilst the original text thumbnails are responsive the play icon is not. What have I got wrong?
Here is a fiddle
<div class="container">
<div class="row">
<div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>
<div class="thumbnail">
<a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">
<div class="caption">
<h4 class="">Richard Feynman</h4>
<p class=""> Watch Him</p>
</div>
<!-- /.caption-->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive"></a>
</div>
<!-- /.thumb-->
</div>
<!-- /.col -->
</div>
<!--end row-->
</div>
<!-- /.container -->
CSS
.thumbnail {
position: relative;
overflow: hidden;
background: transparent;
border: none;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
padding: 2%;
display: none;
text-align: left;
color: #fff !important;
z-index: 2;
/*This is the play icon I ant to be responsive */
background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center;
}
jQuery
$("[rel='tooltip']").tooltip();
$(document).ready(function() {
$('.thumbnail').hover(
function() {
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function() {
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});

Answer 1

You are setting the background image, buy you haven't specified a size so it will default to the full size.
You can set the background-size relative to the container size by using percentages, e.g. the following would make the image half the size of the container:
background-size: 50%;
In your case, if you want the image to fill the container, you can set the background to 100% e.g.
background: transparent url([your url]/play-video.jpg) no-repeat center;
background-size: 100%;
Working snippet:
/* Latest compiled and minified JavaScript included as External Resource */
$("[rel='tooltip']").tooltip();
$(document).ready(function() {
$('.thumbnail').hover(
function() {
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function() {
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
.thumbnail {
position: relative;
overflow: hidden;
background: transparent;
border: none;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
padding: 2%;
display: none;
text-align: left;
color: #fff !important;
z-index: 2;
background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center;
background-size: 100%;
}
/* Added for tesing because your img-responsive class isn't working */
img { width: 100%; height: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>
<div class="thumbnail">
<a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">
<div class="caption">
<h4 class="">Richard Feynman</h4>
<p class="">
Watch Him</p>
</div>
<!-- /.caption-->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive">
</a>
</div>
<!-- /.thumb-->
</div>
<!-- /.col -->
</div>
<!--end row-->
</div>
<!-- /.container -->
Note:
This make the background image 100% of the container, even if the container is larger than the original image size. In your case, you've put the video in Bootstrap cols so it shouldn't be an issue, however if it did become a problem, you would just use media queries to change the percentage value to suit.
Example: Make the background image responsive until the screen size reaches 768px, then limit it to a fixed size:
.caption {
background: transparent url([your url]/play-video.jpg) no-repeat center;
background-size: 100%;
}
#media (min-width: 768px){
.caption {
background-size: 400px 300px;
}
}