A stunning image on a dark background
Displayed on Hover (right)
An elegant picture with a white background
Activated on hover (incorrectly)
I would like it to have a darkened effect on the white background as well.
CSS Styling
.photo
background: no-repeat center center;
background-size: cover;
border-radius: 5px;
width: 100%;
height: 310px;
position: relative;
box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.65);
&:hover {
background-color: #000;
opacity: 0.5;
}
HTML Markup
<%=link_to p do %>
<div class="photo smalled" style="background-image: url(<%=backdrop(p, 'w300')%>)">
<div class="rating text-right">
<%=starsrating p.rating%>
</div>
<div class="overlay">
<div class="text-left">
<h6><%=p.title%></h6>
<h4>
<small>
<strong><%=p.nextSchedule.channel.name%></strong>
<%=l p.nextSchedule.start, :format => :short%>
</small>
</h4>
</div>
</div>
</div>
<% end %>