Парение Agregar texto encima de una imagen al hacer

Ми адаптера Llevo todo el día intentando código para que cuando Хага колеблется конечные остановки en una imagen salga un texto cuando el efecto de opacidad, pero никакой encuentro la manera, alguno sabría Комо puedo hacerlo??? este es el trozo de código que quiero modificar:

.image {
    float: left; 
    width: 28%; 
    margin: 10px
}

.image iframe{
    margin:20px 0 0 0;
    height: 800px;
    width: 100%;
}

.desvanecer:hover {
    opacity: 0.5;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    -ms-transition: opacity 500ms;
    transition: opacity 500ms;
}
<div class="image"> 
  <img class="desvanecer" src="img/teamfight-tactics-little-legends-1- 
             900x506.jpg">
  <iframe src="https://euw.leagueoflegends.com/es/" frameborder="0"> 
  </iframe>
</div>
2
задан 05.11.2019, 22:09
1 ответ

Если ты хочешь достать текст одновременно, что эффект матовости (segГєn я разбираюсь в комментариях) я думаю, что mГЎs простой ему состоит в том, чтобы помещать это признак title в изображение в HTML.

<img class="desvanecer" src="url..." title="Texto encima">

Твой измененный пример:

.image {
    float: left;
    width: 28%; 
    margin: 10px
}

.image iframe{
    margin:20px 0 0 0;
    height: 800px;
    width: 100%;
}

.desvanecer{
  max-width: 300px;
}

.desvanecer:hover {
  opacity: 0.5;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  -ms-transition: opacity 500ms;
  transition: opacity 500ms;
}
<div class="image"> 
     <img class="desvanecer" src="https://appharbor.com/assets/images/stackoverflow-logo.png" title="Texto encima">
     <iframe src="https://euw.leagueoflegends.com/es/" frameborder="0"></iframe>
</div>
0
ответ дан 01.12.2019, 12:56

Теги

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