Как сделать прозрачную накладку на изображении

У меня есть простое изображение, как это:Как сделать прозрачную накладку на изображении

<img src="/assets/missing.png">

Теперь то, что я хочу, чтобы иметь возможность навести курсор на изображение и имеет прозрачную черную накладку появляется с большим " x 'на нем. Возможно ли это с помощью CSS3 или мне нужен Javascript? И если да, то как?

Я вроде как получил его на работу, но у меня есть проблема, которую я не могу исправить. Вот скриншот:

Screenshot

Как вы можете видеть, что есть часть сверху отсутствует. Вот мой css:

.image { 
    padding: 0px; 
    display: inline-block; 
    vertical-align: middle; 
    max-height: 150px; 
    max-width: 150px; 
    margin: 15px; 
    position:relative; 
} 

.image img { 
    width:100%; 
    vertical-align:top; 
} 

.image:after { 
    content:'\A'; 
    position:absolute; 
    width:100%; height:100%; 
    top:0; left:0; 
    background:rgba(0,0,0,0.6); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 

.image:hover:after { 
    opacity:1; 
}

источник

2014-10-21 NickEckhart

Это очень возможно с CSS :) Вот дублированный вопрос - [Черное прозрачное оверлея при наведении изображения только с CSS?] (Http://stackoverflow.com/q/18322548/2930477) – misterManSam

@misterManSam Спасибо, что он работал более или менее, но у меня все еще есть проблема (проверьте вопрос). Есть идеи, в которых проблема? – NickEckhart

Убедитесь, что максимальная высота и ширина соответствуют размерам изображения. Тем не менее, [я оптимизировал эту версию] (http://jsfiddle.net/0b6tau0r/), объединив некоторые ответы. Как это работает для вас, когда вы изменяете максимальную ширину и высоту изображения для своего изображения? – misterManSam

Взгляните на следующую скрипку. Надеюсь, это поможет. http://jsfiddle.net/somy_taheri/93y6hwjk/1/

<html> 
    <div class="outer"> 
     <img src="http://placekitten.com/g/200/300">      
      <div class="overlay"> 
       <p class="text">x</p> 
      </div> 
    </div> 
</html> 
<style> 
.outer { 
    position:relative; 
    width: 200px; 
    height: 300px; 
} 
.overlay {      
    display: none; 
} 

.outer:hover .overlay { 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: black; 
    opacity: 0.7; 
    top: 0; 
} 
.text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform:translate(-50%, -50%); 
    color:white; 
} 
</style>

источник

2014-10-21 07:49:14 Somi

Посмотрите на это.

HTML:

<div class="div"> 
    <div class='overlay'><p>X</p></div> 
    <img src="http://fc02.deviantart.net/fs71/f/2012/157/c/a/watch_dogs___wallpaper__2_by_danielskrzypon-d52hvi1.png"/> 
</div>

CSS:

.div{ 
    height:400px; 
    width:400px; 
    float:left; 
    cursor:pointer; 
} 
img{ 
    height:400px; 
    width:400px; 
} 
.overlay{ 
    height:400px; 
    width:400px; 
    position:absolute; 
    background:rgba(0,153,255,.8); 
    text-align:center; 
    display:none; 
} 
.overlay p{ 
    color:white; 
    line-height:400px; 
    font-size:80px; 
    margin:0; 
}

Запрос:

$(document).ready(function(){ 
    $(".div").stop().mouseenter(function(){ 
     $(".overlay").fadeIn('slow'); 
    }); 
    $(".div").stop().mouseleave(function(){ 
     $(".overlay").fadeOut('slow'); 
    }); 
})

Взгляни. JSFiddle: http://jsfiddle.net/u5ka7Lq4/19/

источник

2014-10-21 08:00:45

Как сделать прозрачную накладку на изображении

ответ

Смежные вопросы