Наложение изображений с заполнением и текстом по центру

Нужно добавить наложение к изображению, которое будет иметь многогранное дополнение, например, 10px и текст «- просмотреть детали», - центрируется как по вертикали, так и по горизонтали. И я не могу найти ничего о том, как этого добиться. Вот URL на скриншот того, что мне нужно. И вот URL оригинального изображения, когда оно не находится в состоянии: hover.Наложение изображений с заполнением и текстом по центру

источник

2015-08-29 sixli

жаль, что у вас нет стартовой разметки - но я понятия не имею, с чего начать – sixli

Накладывается ли наложение или статическое изображение + текст? –

он должен появиться при наведении поверх - в противном случае он должен просто показать изображение - нет наложения и текста – sixli

.image { 
 
    display: inline-block; 
 
    position: relative; 
 
    height: auto; 
 
    width: 25%; 
 
} 
 
.image img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.details { 
 
    display: none; 
 
} 
 
.image:hover .details { 
 
    background-color: white; 
 
    display: block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    height: calc(100% - 20px); 
 
    width: calc(100% - 20px); 
 
} 
 
.details span { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    white-space: nowrap; 
 
}

<div class="image"> 
 
    <img src="http://www.pixeldecor.com/patterns/color-samples/brikbrak-sample.gif" /> 
 
    <div class="details"> 
 
    <span>View details</span> 
 
    </div> 
 
</div>

источник

2015-08-29 11:09:32 kulaeff

Спасибо - это здорово! но есть ли способ не сделать размер изображения фиксированным? Как мне нужно, чтобы он был отзывчивым, поскольку я использую Twitter Bootstrap, и изображение составляет 100% от его контейнера, который изменяет размер? – sixli

Я отредактировал свой ответ. Теперь он должен реагировать. – kulaeff

вы пригвоздили его - спасибо! любые браузеры, которые не поддерживают это? – sixli

Здесь вы идете:

.asdf{ 
    width:270px; 
    height:150px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-75px 0 0 -135px; 
    background-color:green; 
    color:white; 
    text-align:center; 
    line-height:150px; 
}

Heres рабочая скрипку LINK

источник

2015-08-29 11:01:55 Chris

Извините, у меня есть изображение как база и когда у меня есть hoverOver на изображении, тогда нужно показать серое окно с надписью и текстом. – sixli

только что отредактировал оригинальный вопрос, чтобы показать изображение без: hover – sixli

Наложение изображений должно охватывать все изображение? или где он должен появиться? – Chris

.image { 
 
    background: rgba(0, 0, 0, 0) url("http://new.tinygrab.com/a8bc0638b9433ec64cb0bfc81091b1c77b45a66fe1.png") repeat scroll 0 0; 
 
    border: 2px solid gray; 
 
    height: 300px; 
 
    padding: 10px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 300px; 
 
} 
 
.overlay { 
 
    opacity: 0; 
 
    transition: all ease 1s; 
 
    vertical-align: middle; 
 
    line-height: 300px; 
 
    color: #747E8B; 
 
    font-size: 2em; 
 
    height: 0; 
 
} 
 
.image:hover .overlay { 
 
    background: white; 
 
    opacity: 1; 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="image"> 
 

 
    <div class="overlay">-- View Details --</div> 
 

 
</div>

источник

2015-08-29 11:13:29

Отлично, спасибо! Есть ли способ сделать это отзывчивым, поскольку я использую Twitter Bootstrap, и изображение составляет 100% от его контейнера, который изменяет размер? – sixli

Попробуйте использовать этот код внутри сетки Bootstrap. В противном случае принятое решение будет выглядеть хорошо, вы должны попробовать использовать это внутри классов сетки bootstrap. –

Наложение изображений с заполнением и текстом по центру

ответ

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