How to add 'shine' overlay to a div? - html

Question

How can I add a nice overlay like the one in the following image?
Consider the following HTML, how would I add an overlay like that? I know I can use a gradient on top of it, and apply it diagonally, but can I curve it as well?
<div class="photostrip">
<div class="overlay" />
<img src="http://i.imgur.com/a21tM.jpg" />
<img src="http://i.imgur.com/a21tM.jpg" />
<img src="http://i.imgur.com/a21tM.jpg" />
</div>
Here's something I've tried (I've oversaturated the overlay so it's easily seen), but it's not quite the shape I'm looking for.
body { background-color: #4b74db; }
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #000;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
position: relative;
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
border-bottom-right-radius: 200px 403px;
/* This adds the nice overlay. */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0.05) 100%);
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}

Answer 1

Does something like this work for you: http://codepen.io/defo550/pen/Fcsxo
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #fff;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
/* Remove default list stylings*/
list-style: none;
/* provide a position context for our pseudo element */
li {
position: relative;
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}
/* overlay styles
create pseudo element
*/
.photostrip li:after {
content: "";
position: absolute;
/* position above img */
z-index: 5;
width: 175px;
height: 120px;
top: 0;
left: 5px;
/* overlay styles */
background: linear-gradient(135deg, rgba(255,255,255,0.33) 0%,rgba(255,255,255,0.33) 60%,rgba(255,255,255,0) 61%,rgba(255,255,255,0) 100%);
}
<ul class="photostrip">
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
I put your images in an unordered list and then created a pseudo-element on the li (that wraps each image) that has a background gradient with the desired effect ( or close ) of your image above.
You could also target each li separately in the CSS to change up the background gradient.

Answer 2

i think this close to what you are looking for you just have to play with the numbers
http://codepen.io/anon/pen/GDvju
i just added another layer and gave it a top left radius
body { background-color: #4b74db; }
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #000;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
position: relative;
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
/* This adds the nice overlay. */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0.05) 100%);
}
.overlay2 {
height: 100%;
width: 50%;
position: absolute;
right: 0px;
border-top-left-radius: 300px 600px;
background: -webkit-linear-gradient(top, rgba(0,0,0,0.60) 0%,rgba(0,0,0,0.05) 100%);
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}