Как сделать наложение при наведении изображения

Итак, у меня есть галерея, которая содержит несколько фотографий. Я хочу сделать, когда изображение зависло, появляется какая-то информация о человеке, имя человека и его роль.Как сделать наложение при наведении изображения

.gallery { 
 
    position: relative; 
 
    padding: 6px 6px; 
 
    float: left; 
 
    width: 24.99999%; 
 
} 
 

 
.flag { 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
} 
 

 
.flag img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.biodata { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
    color: white; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
}

<div class="gallery"> 
 
    <div class="flag"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    <div class="biodata"> HIS NAME<br/> HIS JOB </div> 
 
    </div> 
 
</div>

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

источник

2017-02-16 Rian

.biodata {высота: 100%} не 0 – arturmoroz

Это помогло бы, если бы вы создали скрипку. Таким образом any1, у кого есть время, чтобы помочь, должен потратить меньше времени, чтобы изучить проблему :) –

ниже обновляется сниппета

.gallery { 
 
    position: relative; 
 
    padding: 6px 6px; 
 
    float: left; 
 
    width: 24.99999%; 
 
} 
 

 
.flag { 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
    position:relative; 
 
} 
 

 
.flag img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 

 
} 
 

 
.biodata { 
 
    position: absolute; 
 
    bottom: 5px; 
 
    left: 5px; 
 
    right: 0; 
 
    
 
    overflow: hidden; 
 
    color: white; 
 
    width: calc(100% - 10px) ; 
 
    height: 0; 
 
    transition: .5s ease; 
 
    display:block; 
 
    background:rgba(0,0,0,0.5); 
 
    
 
} 
 
.flag:hover .biodata{ 
 
    height:calc(100% - 10px); 
 
}

<div class="gallery"> 
 
    <div class="flag"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    <div class="biodata"> HIS NAME<br/> President of INASGOC </div> 
 
    </div> 
 
</div>

источник

2017-02-16 07:27:39 aje

Я хочу, чтобы наложение было на изображении, его все еще на прокладка тоже. любое предложение? – Rian

взгляните на обновленный сниппет – aje

это тот, который я ищу, огромное спасибо. – Rian

Смотреть эту fiddle

CSS

.biodata { 
     z-index:100; 
    } 
.flag:hover .biodata { 
     height:100% 
    }

источник

2017-02-16 07:15:03

использовать этот код:

<!DOCTYPE html> 
    <html> 
     <head> 
     <style> 
     .container { 
      position: relative; 
      width: 50%; 
     } 
     .image { 
      display: block; 
      width: 100%; 
      height: auto; 
     } 
     .overlay { 
      position: absolute; 
      bottom: 100%; 
      left: 0; 
      right: 0; 
      background-color: #008CBA; 
      overflow: hidden; 
      width: 100%; 
      height:0; 
      transition: .5s ease; 

     } 
     .container:hover .overlay { 
      bottom: 0; 
      height: 100%; 

     } 

     .text { 

      white-space: nowrap; 
      color: white; 
      font-size: 20px; 
      position: absolute; 
      overflow: hidden; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      -ms-transform: translate(-50%, -50%); 

     } 
     </style> 
     </head> 
     <body> 
     <div class="container"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image"> 
     <div class="overlay"> 
     <div class="text"> 
     <p style="padding:20px;">I am Mr. Alven</p> 
     </div> 
     </div> 
    </div> 
     </body> 
    </html>

источник

2017-02-16 07:15:14 KiranPurbey

См. Ссылку на скрипку: https://jsfiddle.net/hmtw86n7/ – KiranPurbey

Как сделать наложение при наведении изображения

ответ

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