Tengo un par de tumbnails que yo quiero mostrar un texto sobre ellos en hover. Yo podría hacer que la oscuridad en el hover, pero no sabes cómo agregar texto.

ejemplo: http://www.lenzflare.com/video-production-portfolio/

Aquí es lo que he hecho:

    a {
    display: inline-block;
    overflow: hidden;
    position: relative;
    }
    a:hover .play {
    background:url(http://goo.gl/yJqCOR) no-repeat center    center;
    opacity: 0.8;
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -150px;
    }

<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>

Demo: http://jsfiddle.net/jmXdh/79/

InformationsquelleAutor user2977338 | 2013-11-17

7 Comentarios

  1. 3

    Bueno, voy a asumir que usted desea que esta en una lista:

    Hay un par de conceptos: Relación posicionamiento y cómo funciona con posicionamiento absoluto, orden de Origen, y su centrado técnica.

    La hora de dar position:relative; a la caja, usted está diciendo «yo soy el límite de ahora – para cualquier posición absoluta cosas dentro de mí» (a menos que les son relativos, y entonces como que abajo de la línea) – por Lo tanto, la posición absoluta de la cubierta cosa que quiero fundido en – es absolutamente posicionado para uno o más bordes de la casilla de verificación relativo. (la mayoría de la gente usa top: 0; left: 0;) — a la absoluta cuadro ya no está en el «flujo» y vive en su propio mundo mágico determinado por la relación de los padres.

    Orden de origen: html aparecerá abajo hacia arriba cuando el apilamiento. por lo que su cubierta de la cosa debe estar por debajo de la imagen (en el código html de la orden) – podría usar z-index – pero no hay necesidad de hacer eso.

    Los márgenes negativos no son realmente impresionantes e innecesarios aquí. Usted puede simplemente texto alinear en el centro de ellos. Me gustaría hacer algunas pruebas y poner bordes alrededor de las cosas de modo que usted puede ver lo que está sucediendo. TAMBIÉN os animo a usar box-sizing: border-box; en todo…

    Leer acerca de: Cuadro de borde

    HTML

    <ul class="thumbnail-list">
    
      <li>
        <a href="#" class="image-w">
          <img alt="thumbnail"
               src="http://placekitten.com/600/300" />
    
          <div class="cover">
            <h3>Title</h3>
            <p>A little bit more about the thing</p>
          </div>
        </a>
      </li>
    
    </ul> <!-- .thumbnail-list -->

    CSS

    .thumbnail-list {
      list-style: none;
      margin: 0; paddingn: 0;
    }
    
    .thumbnail-list li {
      float: left;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    .thumbnail-list .image-w {
      display: block;
      position: relative;
      width: 16em;
    }
    
    .image-w img {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .cover {
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      width: 100%;
      height: 100%;
      color: rgba(255,255,255,0);
      text-align: center;
      transition: all 1s linear;
    }
    
    .cover:hover {
      background-color: rgba(0,0,0,.8);
      color: rgba(255,255,255,1);
      transition: all .2s linear;
    }
    
    .thumbnail-list h3 {
      font-size: 1.2em;
    }
    
    .thumbnail-list p {
      font-size: .9em;
    }

    Aquí está el código en acción en jsfiddle

    • Yo no uso una imagen de fondo — y la imagen que se utiliza es lo que realmente está dando la caja es de tamaño — por lo que tendrá que dar realmente el cuadro de una altura y una anchura si desea utilizar una imagen de fondo. pero tienes una imagen en tu código…
  2. 2

    usted podría considerar algo como este violín.
    Puedo copiar mi código aquí:

    =================

    HTML

        <a href="/"  class="img" 
              style="background-image:url('http://i42.tinypic.com/2v9zuc1.jpg');" 
              onmouseover="this.firstElementChild.style.display='block'" >
              <span class='play' onmouseout="this.style.display = 'none'";>
               my lovely text here
              <span>
        </a>

    =================

    CSS

    a {
        min-height:104px;
        min-width:184px;
        display: inline-block;
        overflow: hidden;
        position: relative;
    }
    .play{
        display:none;
        color:#fff;
        height:104px;
        width:184px;
        background-color:rgba(0,0,0,0.5);
        position: absolute;
    }
  3. 1

    Esto funciona:

    .pic{
        background: url(http://i42.tinypic.com/2v9zuc1.jpg);
        width: 200px;
        height: 100px;
    }
    
    .text{
        background: black;
        text-align: center;
        color: white;
        opacity: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: opacity 0.6s;
        -moz-transition: opacity 0.6s;
        transition: opacity 0.6s;
    }
    
    .text:hover{
        opacity: 0.8;
    }
    
    
    <div class="pic">
        <div class="text">My Text</div>
    </div>

    DEMO

  4. 0

    Añadir algo de contenido de texto a la play elemento.

    <div class="play">Some text</div>

    Con el agregado de css .juego:

    color:#fff;
    font-size:16px;
  5. 0

    Suena como usted quiere tener una descripción, si es así, a continuación, añadir un título a la a href:

    <a href="/" title="This is my text" >

    También se podría utilizar el tooltip en jQuery UI.

    De lo contrario, se podría utilizar el javascript onmouseover o las de jQuery hover /mouseenter eventos para mostrar el texto en el juego div. Puede que usted necesita para asegurarse de que el z-index de la obra div es mayor que el de img.

    • Gracias por tu post. No soy bueno en jQuery así que no sé acerca de esta respuesta. :/
  6. 0

    Intente esto: http://jsfiddle.net/JU7zm/

    <a href="/">
        <div class="play">text</div>
        <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
    </a>
    
    
    
    a {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }
    
    a .play {
        display: none;
        background:url(http://goo.gl/yJqCOR) no-repeat center center;
        opacity: 0.8;
        position: absolute;
        width: 184px;
        height: 104px;
        color: #fff;
    }
    
    a:hover .play { display: block;  }
  7. 0

    Aquí es un simple JS solución puede insertar en el HTML:

    <script type="text/javascript">
        document.getElementById("your_image_id").title = 'your hover text';
    </script>

Dejar respuesta

Please enter your comment!
Please enter your name here