I need to achieve this overlay effect on images of varying dimensions in a Pinterest-style fluid grid layout. The outer border width and inset 'border gap' will be fixed dimension. The images themselves will vary and will need to respond fluidly.
Here is my JSfiddle: http://jsfiddle.net/th4229eL/120/
.inner-thumbnail-overlay {
position: absolute;
z-index: 1;
overflow: hidden;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
outline: 10px solid rgba(255, 255, 255, 0.5);
outline-offset: 5px;
margin-left: 15px;
margin-top: 15px; }
I can't work out how to get the right width so the overlays fill the image exactly without overflowing on the right and bottom.
I also tried using JQuery, but I'm probably doing something really dumb and the function isn't working when I call it.
You want some margin on the overlay box, so 100% width + border-box trick won't work.
You should use left, top, right and bottom to size the overlay instead:
.thumbnail-wrapper {
width: 350px;
position: relative;
}
.inner-thumbnail-overlay {
position: absolute;
/* 15px margin */
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
/* background */
background-color: rgba(255, 255, 255, 0.5);
/* outline */
outline: 10px solid rgba(255, 255, 255, 0.5);
outline-offset: 5px;
}
.archive-thumbnail {
display: block;
width: 100%;
}