CSS Темнее на Hover на белом фоне

Question

фото на темном фоне

На Hover (справа)

фото на белом фоне

При наведении курсора (неправильно)

Я хочу это быть темнее на белом фоне также.

CSS

.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

<%=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 %> 

Answer 1

Одним из способов достижения этой цели было бы создать псевдо-элемент, который сидит над верхней части .photo<div>. Сначала было бы прозрачно, затем, когда вы наведете на .photo<div>, его фон изменится на полупрозрачный черный (что можно сделать с помощью rgba или путем установки непрозрачности).

.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); 
    &:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    display: block; 
    border-radius: 5px; 
    } 
    &:hover { 
    &:after { 
     background: rgba(0,0,0,0.3); 
    } 
    } 
} 

http://jsbin.com/ePiGuha/2/edit

Конечно, этот элемент будет охватывать элементы, которые сидят внутри этого дел. Таким образом, вам может потребоваться установить эти элементы относительно и управлять z-index.