Показывать текст, когда он делается в hover в изображении

У меня есть код:

.desvanecer:hover {
  opacity: 0.07;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  -ms-transition: opacity 500ms;
  transition: opacity 500ms;
}
<img class="desvanecer" src="https://i.stack.imgur.com/tCYnU.png" />

с этим мне удается рассеять изображение, переместив мышь, но: как он делается для того, чтобы появилась добавочная информация о рассеянном изображении? А именно, что о рассеянном изображении сказал что-то как пример: "Привет, это информация logo".

Пример:

La imagen se torna gris y se ubica texto por encima

Я хотел бы узнать самое основное, чтобы этого добиваться.

4
задан 15.01.2017, 15:26
0 ответов

Как функционирует пример, который ты соединяешь

Если ты смотришь код, ты можешь видеть, что то, что делает Dribble, состоит в том, что у каждой "карточки" есть различные контейнеры и элементы внутри одного div (упрощая): один содержит изображение, другой содержит текст с описанием, другим выборы, и другой автор.

div что содержит описание изображения (.dribbble-over) у него есть по умолчанию матовость 0 (из-за которого он невидимый), и когда проходит мышь над контейнером изображения (.dribbble-img), меняется Ваша матовость в 1. Каждый факт с CSS и переходами CSS (без необходимости использовать язык сценариев JavaScript).

Как приспосабливать этот пример к твоему коду

Код, который ты имеешь в вопросе, функционирует противоположным способом: когда проходит мышь над изображением, эта теряет матовость становясь почти невидимым. Но это не проблема, только он изменит немного функционирование.

То, что ты должен делать:

  • Создавать контейнер (один div) у которого будет внутри изображение.
  • Создавать внутри того же самого новый контейнер, чтобы помещать текст, который он появится.
  • Posicionar вышеупомянутый контейнер категорически, и что остался за изображением (с одним z-index отрицательный или меньше, чем тот изображения)

Здесь я оставляю простой пример того, как он мог бы быть:

.div-imagen {
  display:inline-block;
  position:relative;
}

.div-imagen > div {
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  padding:10px;
  margin:0;
}

.desvanecer:hover {
  opacity: 0.07;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  -ms-transition: opacity 500ms;
  transition: opacity 500ms;
}
<div class="div-imagen">
  <div>
      Descripción de la foto que quieres que se muestre
  </div>
  <img class="desvanecer" src="http://placehold.it/200x200" />
</div>
7
ответ дан 03.12.2019, 17:40
  • 1
    большое спасибо.. и во все из-за Вашего терпения... я изучил что-то благодаря всем –  16.01.2017, 17:30

Примеры, поскольку было бы возможно реализовывать эффект (единственный CSS):

Показывать текст, когда он делается в hover в изображении

#1: с line-height:

.img-container {
  width: 300px;
  height: 200px;
  position: relative; 
}

.img-container p {
  margin: auto;  
  color: #fff;
  text-align: center;
  
  line-height: 200px; /* igual height de la imagen */
  
  background: #000;
  transition: opacity .4s linear;
  cursor: pointer;  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.img-container:hover p {
  opacity: .75;  
}
<div class="img-container">
    <img src="http://placehold.it/300x200">
    <p>Texto de prueba</p>
</div>

#2: с padding:

.img-container {
  width: 300px;
  height: 200px;
  position: relative;
  line-height: 0;
}

.img-container p {  
  height: 0;
  margin: 0;
  
  padding: 100px 0; /* == mitad de la imagen (height) */
  
  color: #fff;
  text-align: center;  
  background: #000;
  transition: opacity .4s linear;
  cursor: pointer;  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.img-container:hover p {
  opacity: .75;  
}
<div class="img-container">
  <img src="http://placehold.it/300x200">
  <p>Texto de prueba</p>
</div>

#3: с эффектом slide-up текст:

.img-container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.img-container:before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  background: #000;
  opacity: 0;
  transition: opacity .3s linear;   
}

.img-container:hover:before { 
  opacity: .75;
}

.img-container p {
  width: inherit;  
  color: #fff;
  text-align: center;
  position: absolute;
  top: 100%; 
  transition: top .3s linear;
}

.img-container:hover p {    
  top: 70%;
}
<div class="img-container">
  <img src="http://placehold.it/300x200">
  <p>Texto de prueba</p>
</div>

#4: сходный с примером изображения:

introducir la descripción de la imagen aquí

body {
  background: #eee;
}

.img-container {
  width: 200px;
  height: 150px;
  padding: 10px 10px 30px 10px;
  background: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.img-container:before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  background: #fff;
  opacity: 0;
  transition: opacity .1s ease-out;   
}

.img-container:hover:before { 
  opacity: 1;
}

.img-container .text-container {
  width: inherit;
  padding: 5px 15px;
  color: #444;
  position: absolute;
  top: 100%; 
}

.img-container:hover .text-container {    
  top: 0;
}

p {
  color: #888;
  font-size: .75em;
  line-height: .2em;
}

i {
  font-style: normal;
}
<div class="img-container">
  <img src="http://placehold.it/200x150">
  <div class="text-container">
    <h4>Titulo</h4>
    <p>Texto de prueba</p>
    <p>Texto de prueba</p>
  </div>
  <i>icons | icons | icons |<i/>
</div>
5
ответ дан 03.12.2019, 17:40

Это не трудное задание реализовать, читая немного consiguías.

Шаги:

  1. Заключать изображение в одном figure
  2. Добавлять также один <figcaption> с описанием изображения

let image = document.querySelector('.image');
let select = document.getElementById('effect');

select.addEventListener('change', function (e) {
  image.className = `image ${this.value}`;
});
@import url('https://fonts.googleapis.com/css?family=Exo');

.image {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
  height: 250px;
  overflow: hidden;
  margin: 15px auto;
  position: relative;
  width: 250px;
}

figure img {
  border-radius: 5px;
  height: 100%;
  transition: all .23s ease;
  width: 100%;
}

.image figcaption {
  color: #555;
  font-family: 'Exo';
  height: 100%;
  left: 0;
  line-height: 250px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  transition: all .23s ease;
  width: 100%;
}

.image.fade figcaption {
  opacity: 0;
  visibility: hidden;
}

.image.push figcaption {
  top: 0;
  transform: translateY(250px);
}

.image.push:hover > img {
  transform: translateY(-250px);
}

.image.push:hover > figcaption {
  transform: translateY(0px);
}

.image.fade:hover > img {
  opacity: 0;
  visibility: hidden;
}

.image.fade:hover > figcaption {
  opacity: 1;
  visibility: visible;
}

/* Form styles */
form {
  margin: 20px auto;
  width: 150px;
}

form label {
  font-family: 'Segoe UI', 'Open Sans';
  font-size: 14px;
  font-weight: 500;
}

form select {
  border: 1px solid #ddd;
  border-radius: 2px;
  font-family: 'Segoe UI', 'Open Sans';
  margin: 0 0 0 10px;
  padding: 0 1rem;
}
<figure class="image fade">
  <img src="http://4.bp.blogspot.com/-KcxlSXC0qk8/TeKSFXmSAjI/AAAAAAAAAS8/cYqGQolvNbs/s1600/3musicos.jpg">
  <figcaption>Los tres músicos</figcaption>
</figure>

<form>
  <label for="effect">Effect</label>
  <select id="effect">
    <option value="fade">Fade</option>
    <option value="push">Push</option>
  </select>
</form>
4
ответ дан 03.12.2019, 17:40
  • 1
    Привет Относящийся к Богородице, я думаю, что OP был ясным в Вашей цели, по крайней мере для mí останься ясным. С другой стороны он не собирался отвечать, он má s, voté из-за дубликата, но @AlvaroMontoro, автор ответа вопроса ссылки, aclaró что не podrí чтобы относиться друг к другу о дубликате, из-за которого escribí é sto. Привет и спасибо за рекомендации, tendré в счете в pró xima возможность. –  15.01.2017, 14:48
  • 2
    +1 в этот хороший ответ –  17.01.2017, 14:31

Возможно используя признак title добейся того, что ты желаешь:

<img class="desvanecer" src="logo.png" title="Hola, esta es la información del logo." />
2
ответ дан 03.12.2019, 17:40
  • 1
    спасибо omar, но вот то, что он искал. спасибо за обслуживание. –  14.01.2017, 20:07
  • 2
    @Rick ¿ qué он, что ты хочешь, чтобы он появился? ¿ И có mo не это, что ты ищешь? Если это единственный текст, и ты не хочешь использовать язык сценариев JavaScript, title - хорошая одна opció n –  14.01.2017, 20:09
  • 3
    Возможно то, что ты хочешь сделать, является Tooltip, é сведите с ума глаз в эту ссылку: w3schools.com/howto/howto_css_tooltip.asp –  14.01.2017, 20:12

Теги

Похожие вопросы