Darken image on hover

Question

Попытка сделать изображение темным на зависании, но что-то в нем.

Я использовал «span» для создания темного слоя, но когда я его добавляю, он выглядит плохо.

<div class="postOUT"> 

    <div class="post_first"> 
     <span></span> 
     <div class="category">Stuff</div> 
     <h1>Text will go here</h1> 
    </div> 

ПОЛНЫЙ КОД С помощью CSS:

• без SPAN - http://jsfiddle.net/np2fLwva/
• С SPAN - http://jsfiddle.net/tvL84sd9/

Есть еще один способ, чтобы создать этот эффект?

Answer 1

Try так: Demo

CSS:

.overlay { 
    display: block; 
    height: 100%; 
    width: 100%; 
    background: transparent; 
    -moz-transition: all 1s; 
    -webkit-transition: all 1s; 
    transition: all 1s; 
} 
.overlay:hover { 
    display: block; 
    background: rgba(0, 0, 0, .5); 
} 

HTML:

<div class="overlay"> 
      <!-- <span></span> If i add it all breakes--> 
      <div class="category">Stuff</div> 
      <h1>Text will go here</h1> 

     </div> 

Answer 2

Вы можете сделать это абсолютное позиционирование тоже:

.postOUT{ 
    position:relative; 
} 

.postOUT span, .postOUT span{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    opacity: 0; 
    background: rgba(0,0,0,.5); 
    -moz-transition: all 1s; 
    -webkit-transition: all 1s; 
    transition: all 1s; 
} 

Вот рабочая скрипку: http://jsfiddle.net/2s2fLar1/

Answer 3

Если вы хотите, чтобы избежать дополнительной разметки, вы можете использовать элементы псевдо, так же, как и в этой скрипкой: http://jsfiddle.net/np2fLwva/3/

.post_first:after, .post_other:after { 
    display:block; 
    content:""; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-color:rgba(0, 0, 0, 0.85); 
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */ 
    z-index:1; 
    color:black; 
    opacity:0; 
    -moz-transition: all 1s; 
    -webkit-transition: all 1s; 
    transition: all 1s;  
} 

.post_first:hover:after, .post_other:hover:after { 
    opacity:1; 
} 

Answer 4

Этот простой код HTML & CSS , Вы можете использовать это для создания эффекта теневого эффекта.

HTML часть.

<div class="bg"> 
    <div class="shade"></div> 
</div> 

Часть CSS.

.bg{ 
    height: 500px; 
    background: url(your_image.jpg) no-repeat center center; 
    background-size: cover; 
} 
.shade { 
    width: 100%; 
    height:100%; 
    transition: 0.5s all; 
} 
.shade:hover { 
    background-color: rgba(0,0,0,0.2); 
} 

Answer 5

семантически span элементы должны использоваться для встроенных объектов. Однако ваш прецедент - это элемент уровня блока. Поэтому, как минимум, я бы рекомендовал использовать элемент div. Однако для устранения пустых элементов HTML рассмотрим возможность размещения фонового наложения на псевдоэлементе :before/:after.

Побочное примечание: Согласно CanIUse.com, вам нужно только префикс -webkit поставщика для переходов, и это только для старых браузеров Android. В противном случае вы в порядке, просто указывая transition: [values].

Вот пример:

.post_first { 
 
    overflow: auto; 
 
    clear: both; 
 
    height: 649px; 
 
    background: url(http://japanpapa.ru/fun/jpap/img/featured-bg.png), url(http://japanpapa.ru/fun/jpap/img/post01.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    position: relative; 
 
} 
 
.post_first .-content { 
 
    position: relative; 
 
    z-index: 1000; 
 
} 
 
.post_first:before { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0; 
 
    background: rgba(0, 0, 0, .5); 
 
    -webkit-transition: opacity 0.25s ease-in-out; 
 
    transition: opacity 0.25s ease-in-out; 
 
    content: ""; 
 
    z-index: 999; 
 
} 
 
.post_first:hover:before { 
 
    opacity: 1; 
 
} 
 
.category { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 1.5em; 
 
    font-weight: 500; 
 
    text-transform: uppercase; 
 
    color: white; 
 
    padding: 10px; 
 
    border: 3px solid #fff; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
    width: 150px; 
 
    position: relative; 
 
    top: 7.4%; 
 
} 
 
.post_first h1, 
 
.post_other h1 { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 3em; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    color: white; 
 
    padding: 0 10%; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
    position: relative; 
 
    top: 14.5%; 
 
}

<div class="postOUT"> 
 

 
    <div class="post_first"> 
 
    <div class="-content"> 
 
     <div class="category">Stuff</div> 
 
     <h1>Text will go here</h1> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 6

Вы можете использовать один элемент для этого, и использовать псевдо-элемент для наложения:

div{ 
 
    height:300px; 
 
    width:300px; 
 
    position:relative; 
 
    background:url(http://placekitten.com/g/300/300); 
 
    } 
 
div:before{ 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    height:100%; 
 
    width:100%; 
 
    background:black; 
 
    opacity:0; 
 
    transition:all 0.6s; 
 
    } 
 

 
div:hover:before{ 
 
    opacity:0.4; 
 
    }

<div></div>