1

Реализовать через CSS

Можете подсказать, как у картинки (при наведении курсора!):

  1. затемнить фон
  2. добавить желтый крестик

Сам html:`

                        </a>
                    </li>
                    <li class="b-photography__item">
                         <img src= "img/photoslidercross.png" alt="photography" class="b-photoslidercross" title="" />
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" alt="photography" class="b-photoselect"  title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                         <img src= "img/photoslidercross.png" alt="photography" class="b-photoslidercross" title="" />
                        <a href="" class="b-photography__link" title="" >
                            <img src= "img/mechanic.png" class="b-photoselect" alt="" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="photography" >
                            <img src= "img/mechanic.png" alt="photography" title="" class="b-photoselect" />
                        </a>
                    </li>
                    <li class="b-photography__item b-photography-first__item">
                        <a href="" class="b-photography__link b-photography-first__item" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item b-photography-first__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />

                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                        <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                    </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link"  title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item b-photography-first__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item b-photography-first__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">    
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link b-photography-first__item" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item b-photography-first__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title="" />
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title=""/>
                        </a>
                    </li>
                    <li class="b-photography__item">
                        <a href="" class="b-photography__link" title="">
                            <img src= "img/mechanic.png" class="b-photoselect" alt="photography" title=""/>
                        </a>
                    </li>`

введите сюда код
1
  • 1
    если покажете код, то советы будут более точными. а в теории вот так: 1 - через img:hover наложить поверх картинки ещё один слой с background: rgba(0,0,0,.5) || 2 - если крестик нужен отдельно, то можно добавить его через псевдоэлемент ::after вашему блоку.
    – lexxl
    12 дек 2015 в 10:02

2 ответа 2

3

Можно сделать так

body {
  margin: 0;
  padding: 0;
}

.photo {
  margin: 10px;
  float: left;
}

.photo img {
  width: 250px;
  height: 250px;
  float: left;
}

.photo:hover:after {
  width: 70px;
  height: 70px;
  padding: 90px;
  position: absolute;
  margin-left: -250px;
  content: '+';
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: #FFE200;
}
<div calss="div">
  <div class="photo">
    <img src="https://yandex.kz/images/today?size=250x250" />
  </div>
  <div class="photo">
    <img src="https://yandex.kz/images/today?size=250x250" />
  </div>
  <div class="photo">
    <img src="https://yandex.kz/images/today?size=250x250" />
  </div>
  <div class="photo">
    <img src="https://yandex.kz/images/today?size=250x250" />
  </div>
</div>

2

приблизительно так

.colp{    
    text-align: center;
}
.colp-item{
    width: 30%;
    margin-right: 10px;
    margin-bottom: 9px;
    display: inline-block;
    vertical-align: top;
}
.colp-pict{
    width: 100%;
    padding-bottom: 68.68%;
    display: block;
    position: relative;    
}
.colp-pict > img {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.colp-pict:before,
.colp-pict:hover:after{   
    content: '';
    position: absolute; top: 0; left: 0;    
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.colp-pict:before{   
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;    
}
.colp-pict:hover:after{   
    content: '+';
    position: absolute; top: 50%; left: 50%;
    margin: -15px 0 0 -15px;
    border: 3px solid #000;
    background: #000;
    width: 30px;
    height: 30px;       
    line-height: 32px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    font-size: 26px;
    border-radius: 50%;
}
.colp-pict:hover:before,
.colp-pict:hover:after{
    opacity: 1;
    visibility: visible;    
}
<div class="colp">
<a href="#" class="colp-item">
    <span class="colp-pict">
        <img src="http://incost-dom.ru/assets/templates/site/images/3.jpg" alt="" />
    </span>    
</a>
<a href="#" class="colp-item">
    <span class="colp-pict">
        <img src="http://incost-dom.ru/assets/templates/site/images/3.jpg" alt="" />
    </span>    
</a>
<a href="#" class="colp-item">
    <span class="colp-pict">
        <img src="http://incost-dom.ru/assets/templates/site/images/3.jpg" alt="" />
    </span>    
</a>    
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.