Soporte » Guías – Resolución de problemas » Modifica CSS con efectos en imagenes

  • Hola,

    Quiero agregar efectos a mis imágenes y encontré el siguiente código:

    HTML:

    <div class="morph pic">
      <img src="http://lorempixel.com/300/300/nature/5" alt="beach">
    </div>

    CSS

    * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
              box-sizing: border-box;
    }
    
    body {
      background: #333;
    }
    
    .pic {
      border: 10px solid #fff;
      float: left;
      height: 300px;
      width: 300px;
      margin: 20px;
      overflow: hidden;
    
      -webkit-box-shadow: 5px 5px 5px #111;
              box-shadow: 5px 5px 5px #111;
    }
    /*MORPH*/
    .morph {
      -webkit-transition: all 0.5s ease;
         -moz-transition: all 0.5s ease;
           -o-transition: all 0.5s ease;
          -ms-transition: all 0.5s ease;
              transition: all 0.5s ease;
    }
    
    .morph:hover {
      border-radius: 50%;
      -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
           -o-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
              transform: rotate(360deg);
    }

    Pero cunado agrego el CSS a Style.css y el HTML a la pagina donde pongo la imagen no pasa nada… Alguien me podría ayudar porfa?

  • El debate ‘Modifica CSS con efectos en imagenes’ está cerrado a nuevas respuestas.