Quiero hacer zoom en el texto como este. pero en este texto opacidad:0. No tengo que ocultar el texto de la opacidad de texto:1 y no quiero cuadro como que sólo el texto sería zoom

He probado las siguientes, pero sin éxito:

CSS:

ul li {
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

ul li:hover {
  transform: translateY(100px);
  transition: all 0.3s ease-in-out 0.1s;
}

HTML:

<ul>
  <li>Text effect</li>
  <li>Text effect</li>
</ul>

  • pero en este texto opacidad:0. No tengo que ocultar el texto – bueno, por lo que no se puede simplemente eliminar opacity:0?
  • No ocultar el texto hará que el texto muy en grande en la pantalla. Es esto realmente lo que quieres?
  • si quitar la opacidad no funciona ¿por qué
  • ¿Has comprobado mi demo?
  • Creo que el OP quiere que el texto no se desvanecen, pero en lugar de animar desde la izquierda y aumentar/reducir al mismo tiempo.
InformationsquelleAutor Anubhav pun | 2016-05-20

3 Comentarios

  1. 4

    Intentar algo como esto:

    HTML

      <ul>
        <li><p>Text effect</p></li>
        <li><p>Text effect</p></li>
      </ul>

    Css

    ul li{
      width: 100px;
      height: 100px;
      background: red;
      color: white;
      display: inline-block;
      float: left;
      margin: 10px;
      overflow: hidden;
      text-align: center;
    }
    ul li p {
      opacity: 0;
      transform: scale(10);
      transition: all 0.3s ease-in-out 0.2s;
    }
    ul li:hover p{
      opacity: 1;
      transform: scale(1);
      transition: all 0.3s ease-in-out 0.1s;
    }

    Tratar aquí http://jsbin.com/xohimubeso/edit?html,css,salida

    • no, yo no tengo que esconder el texto el texto se muestra y li width:100%
    • No se puede entender muy bien lo que quieres hacer, pero esta versión debe ajustarse jsbin.com/bocokajufa/3/edit?html,css,salida
    • gracias a este vínculo de trabajo para mí
    • wow, simplemente no se pudo quitar la opacity a ti mismo? Es, literalmente, sólo la eliminación de esa línea…
  2. 2

    Utilizando transform: scale() como usted hizo es una buena manera de implementar esto. Sin embargo, usted querrá para restablecer la escala del valor normal cuando :hover.

    Desde li tiene por defecto display: list-item toman el 100% de la anchura disponible. Como tal, haciendo el zoom en el centro de la li cuando el texto está alineado a la izquierda hará que desaparezca el texto. Envuelve tu texto en un span que ha display: inline-block con el fin de hacer zoom en el centro del texto en su lugar.

    También, los sitios web que tiene el texto de fade in/out. Agregar opacity: 0 a su span hacerla invisible y, a continuación, la transición a la opacity: 1 en :hover para lograr este fade in/out efecto.

    También transform: translateY(100px) probablemente no es necesario, ni es el duplicado transition de la propiedad dentro de su :hover.

    Demo 1 – no opacity, sin caja, animar desde la izquierda

    CSS:

    ul li {
      background: lightgrey;
      list-style: none;
      margin: 5px 0;
    }
    ul li span {
      position: relative;
      left: -100%;
      font-size: 20px;
      transform: scale(10);
      transition: all 0.3s ease-in-out 0.2s;
    }
    ul li:hover span {
      left: 0;
      transform: scale(1);
    }
    span {
      display: inline-block;
    }

    HTML:

    <ul>
      <li><span>Text effect</span></li>
      <li><span>Text effect</span></li>
      <li><span>Text effect</span></li>
      <li><span>Text effect</span></li>
    </ul>

    Demo 2 – con opacity, cuadro. Como se muestra en el enlace adjunto

    CSS:

    ul li {
      list-style: none;
      width: 200px;
      height: 200px;
      border: 5px solid black;
      margin: 10px;
      background: #FAEBD9;
      overflow: hidden;
      float: left;
    }
    ul li span {
      font-size: 20px;
      opacity: 0;
      transform: scale(10);
      transition: all 0.3s ease-in-out 0.2s;
    }
    ul li:hover span {
      opacity: 1;
      transform: scale(1);
    }
    span {
      display: inline-block;
    }

    HTML:

    <ul>
      <li><span>Text effect</span></li>
      <li><span>Text effect</span></li>
      <li><span>Text effect</span></li>
      <li><span>Text effect</span></li>
    </ul>

Dejar respuesta

Please enter your comment!
Please enter your name here