Красивый эффект. Наложение изображения на картинку при наведении

29.12.2017

Можно получить интересный и красивый эффект, накладывая полупрозрачную картинку на фотографию, при наведении.

HTML

 
<div class="item">
    <div class="img">
        <img src="03.jpg" alt="pic">
    </div>
</div>

CSS

 
.item {
    background: #fbc227;
    width: 580px;
    height: 311px;
    position: relative;
    margin-bottom: 20px;
}
.item .img:before {
	display:none;
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: url('hover.png');
}
.item .img:hover:before
{
	display:block;
}

Пример:

Категории: CSS