Показывать заголовок эскиза при наведении по центру

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

В скрипке вы видите отзывчивую сетку миниатюр с заголовком при наведении. Я обозначил его пунктирной красной рамкой, чтобы вы могли видеть, что он не такого размера, как миниатюра. Я не могу сделать заголовок по центру миниатюры. Возможно, моей сетке миниатюр нужна другая сборка. Надеюсь, кто-нибудь может мне помочь.

Вот скрипка

#content {
position: relative;
display: inline-block;
margin: 110px 40px 100px 40px;
background-color: transparent;
}

.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}

.thumb {
display: block;
margin: 10px;
}

.col-25 img {
width: 100%;
height: auto;
}

.col-25 a:hover img {
opacity: 0.1;
}

.caption {
position: absolute;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:100%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.col-25 a:hover .caption {
opacity: 1;
}

html css hover caption
person KP83    schedule 29.01.2015    source источник

Ответы (6)


arrow_upward
1
arrow_downward

http://jsfiddle.net/a0zwecou/14/

Я добавил внутренний элемент div к подписи и задал ему высоту поля 25%. Удалите поле для очень маленького размера ширины в вашем медиа-запросе.

    <div class="caption">
          <div class="inner-caption">
              <h3>Untitled for now</h3>
              <p>Caption</p>
          </div>
    </div>

CSS-

.inner-caption{margin-top:25%;}
person Jason    schedule 29.01.2015
comment
Спасибо, у вас работает лучше всего! Можно ли удалить внешнее поле подписи, чтобы при использовании цвета фона он был того же размера, что и миниатюра? - person KP83; 29.01.2015
comment
Лучшее, о чем я могу думать, это изображение в качестве фона миниатюры с высотой и шириной 100%. А затем убрать фон при наведении. - person Jason; 29.01.2015
comment
http://jsfiddle.net/a0zwecou/22/ Я предполагаю, что вы этого хотите. - person Jason; 29.01.2015
comment
Спасибо, но под миниатюрой все еще есть место, и теперь он отталкивает миниатюры под собой. - person KP83; 29.01.2015

arrow_upward
1
arrow_downward

JSFIIDLE

только путем изменения высоты и добавления отступов к классу заголовка.

.caption {
position: absolute;
padding-top:25%;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:60%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
person Hector    schedule 29.01.2015
comment
Спасибо Хосейн! вроде работает и просто. Но вы говорите об изменении ширины, но вы имеете в виду высоту? - person KP83; 29.01.2015
comment
Можно ли при использовании цвета фона для подписи точно покрывать размер миниатюры? Теперь он перекрывает миниатюру. - person KP83; 29.01.2015
comment
удалить поле: 10px; из класса большого пальца. - person Hector; 29.01.2015
comment
Не может ли это привести к схлопыванию сетки эскизов, чтобы не было зазора в 20 пикселей (10+10 пикселей). - person KP83; 29.01.2015

arrow_upward
1
arrow_downward

Попробуй это,

.thumb:hover{border:1px dashed red;background-color:red;}

.caption {
position: absolute;
top:40%;
left:0;
/*border: dashed 1px red;*/ //remove it
width:100%;
/*height:100%;*/ // remove it
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
 transition: all 0.3s;
 }

Скрипт: http://jsfiddle.net/a0zwecou/20/

person Delphin Sam    schedule 29.01.2015
comment
Спасибо, но это не совсем по центру - person KP83; 29.01.2015
comment
При 40% он центрируется, но возможно ли при использовании цвета фона для подписи точно покрыть размер миниатюры? - person KP83; 29.01.2015
comment
Проверьте мой обновленный ответ на цвет фона при наведении большого пальца. Скрипт: jsfiddle.net/a0zwecou/20 - person Delphin Sam; 29.01.2015

arrow_upward
0
arrow_downward

см. скрипт здесь: http://jsfiddle.net/a0zwecou/13/ и добавьте CSS:

.caption h3 {
    margin-top: 59px;
}
person anji    schedule 29.01.2015

arrow_upward
0
arrow_downward

Вы можете просто поместить свою подпись в другой div и центрировать ее с помощью Transate (со всеми префиксами, конечно), ИЛИ вы можете просто центрировать ее, используя таблицы (таблица + таблица-ячейка)
ЗДЕСЬ ПЕРО, наведите курсор на первое.

.insideCap{
  background: red;
  top: 50%;
  position: absolute;
  width: 100%;
  transform: translateY(-50%);
}

ДРУГОЙ ПУТЬ:

parent{
  dispaly:table;
}
son{
  display: table-cell;
  vertical-align: middle;
}
person dghez    schedule 29.01.2015

arrow_upward
0
arrow_downward 

you can try this:
<div id="content">


HTML:
Add this div:

    <div class="col-25">
            <a class="thumb" href="#">
                <img src="http://fakeimg.pl/500x310/999/">
                    <div class="caption"><div class="caption-text"><h3>Untitled for now</h3><p>Caption</p></div></div>
            </a>
        </div>

CSS:
add this css in your style:
.caption-text {
    left: 0;
    position: absolute;
    right: 0;
    top: 32%;
}

ПОСМОТРЕТЬ ДЕМО-ДЕМО JS Fiddle

person Jenti Dabhi    schedule 29.01.2015
comment
Спасибо, но не работает то, что я хочу достичь. - person KP83; 29.01.2015