Как сделать наложение CSS поверх изображений из базы данных

-1

Я хотел бы иметь эскизы с прозрачным оверлеем, поэтому, когда пользователь наводится на изображение, он будет иметь в центре «х» глификон и текст под ним говорится «удалить фотографию». Он должен быть чистым css3 и для пользователя удалять изображение со своей страницы, которое выполняется через db. Однако, как я могу гарантировать, что он будет работать для изображений, вызываемых из базы данных, для наложения вместо жесткого кодирования изображений в html?Как сделать наложение CSS поверх изображений из базы данных

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <img src="img1" data-src="" class="img-responsive"> 
     <img src="img2" data-src="" class="img-responsive"> 
     </div> 
    </div> 
</div>

спасибо.

источник

2016-04-05 Krys

В чем разница между изображениями, которые трудно закодированных и образы, которые загружаются из базы данных? Изображение - это изображение. С чем именно вам нужна помощь? Задача кажется довольно простой. – Narxx

Основной поиск показал бы, что этот вопрос был задан * тысячами раз раньше. –

@Narxx, извините, я новичок в продвинутых методах, я думаю ... – Krys

Это один вариант acomplish то, что вы хотите с чистого CSS

.img-wrap:hover > .img-options{ 
 
    display: block; 
 
} 
 

 
.img-options{ 
 
    display: none; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="img-wrap"> 
 
      <img src="img1" data-src="" class="img-responsive"> 
 
      <div class="img-options"> 
 
      delete image 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

Таким образом, вы можете скрыть/показать параметры для каждого изображения. Обязательно заполните код css, чтобы элемент img-options был полностью расположен над изображением.

источник

2016-04-05 15:41:36 rubentd

изображение не отображается, плюс это не совсем то, о чем я прошу ... – Krys

Вы можете использовать селектор css 2.1 :hover на элементе контейнера и установить значок X как прозрачное фоновое изображение этого контейнера.

.col-md-12:hover { 
    background-image: url(x-icon.png); 
    background-repeat: no-repeat; 
    background-position: center center 
}

Вместо .col-md-12 следует использовать общее имя класса.

источник

2016-04-05 15:44:45

Я думаю, у меня может быть еще один div внутри col-md-12 и дать этому селектору отдельные изображения ... – Krys

Могу ли я предложить вам использовать псевдо-элемент, как этот

span { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
span:hover:after { 
 
    content: 'X \A' attr(data-text); 
 
    white-space: pre; 
 
    font-size: 24px; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255,255,255,0.5); 
 
}

<span data-text="Delete image"> 
 
    <img src="http://lorempixel.com/200/100/animals/3" data-src="" class="img-responsive"> 
 
</span>

источник

2016-04-05 16:05:12 LGSon

это кажется довольно хорошо, но могу ли я иметь div вместо использования пролета? – Krys

@Krystyna Конечно, вы можете, просто измените, и он будет работать одинаково – LGSon

Как сделать наложение CSS поверх изображений из базы данных

ответ

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