css3

Hola, os dejo algunos efectos mouse over para imágenes creados con CSS que los podéis aprovechar tanto para resaltar las imágenes como para resaltar enlaces con una imagen.

Son muy sencillos de configurar y de insertar en la web, os también dejo el código.

Configura los parámetros a tu gusto y ya lo tienes.

  • Efecto up en la imagen creado con CSS:

Efecto up en imagen con mouse over creado con CSS

Efecto up de la imegen con mouse over

Al pasar el ratón sobre la imagen, esta sube ligeramente conforme al resto.

Demo: ver ejemplo

Código:

HTML

<div class="ex1" >
<img alt="img0" src="http: ../imagen0.jpg" />
<img alt="img1" src="http: ../imagen1.jpg" />
<img alt="img2" src="http: ../imagen2.jpg" />
<img alt="img3" src="http: ../imagen3.jpg" />
</div>

CSS

img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-ms-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
.ex1 img:hover {
margin-top: 2px;
}
  • Efecto zoom en la imagen:

Efecto Zoom creado con CSS

Efecto Zoom

Al pasar el puntero sobre la imagen, esta se agranda a la vez que desplaza al resto a los lados.

Demo: ver ejemplo

Código:

HTML

<div id="container">
<div class="ex2">
<img alt="img0" src="http: ../imagen0.jpg" />
<img alt="img1" src="http: ../imagen1.jpg" />
<img alt="img2" src="http: ../imagen2.jpg" />
<img alt="img3" src="http: ../imagen3.jpg" />
</div>
</div>

CSS

#container {
width: 300px;
margin: 0 auto;
}
.ex2 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
  • Efecto giro

Efecto giro creado con CSS

Efecto giro creado con CSS

Este es un efecto de un giro parcial en el que se inclina ligeramente la imagen a la izquierda al pasar el puntero sobre ella.

Demo: ver ejemplo

Código:

HTML

<div id="containerEx3">
<div class="ex3">
<img alt="img0" src="http: ../imagen0.jpg" />
<img alt="img1" src="http: ../imagen1.jpg" />
<img alt="img2" src="http: ../imagen2.jpg" />
<img alt="img3" src="http: ../imagen3.jpg" />
</div>
</div>

CSS

#containerEx3 {
width: 800px;
margin: 0 auto;
}
.ex3 img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.ex3 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);
}
  • Efecto texto deslizante junto a la imagen

Texto deslizante mouse over con CSS

Texto deslizante mouse over

En esta caso que al poner el mouse sobre la imagen, el efecto no es sobre esta, sino que sale un texto descriptivo a la derecha de la imagen y se desliza desde la parte superior. Aquí podemos poner tanto un titulo como un texto descriptivo.

Demo: ver ejemplo

Código:

HTML

< div id="ex4" >
<img src="http:../imagen1.jpg">
<p>Some Text</p>
</div>

CSS

 

#ex4 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent; font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#ex4:hover {
line-height: 133px;
color: #575858;
}
#ex4 img{ float: left;
margin: 0 15px;
}

NOTA: las medidas de tiempo de las transiciones están en segundos 1s un segundo y 0.5s medio segundo, esto puedes codificarlo a tu antojo y según tus necesidades, también puedes añadir efectos de brillo o sombras en el mismo CSS que aparezcan o desaparezcan al poner el puntero sobre ellas.

ejem: en este caso aparcera la sombra al poner el ratón para el ex2

.ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
/*** aquí va la sombra ***/
-webkit-box-shadow: 0 0 5px #999;
-moz-box-shadow: 0 0 5px #999;
-ms-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
}

Espero y deseo que os gusten.

Fuente: http://designshack.net/

36 Comentarios
  1. Juan 8 años

    HEY DUDE ME FUNCIONO PERO EL TEXTO NO SE ESCONDE ESTA VISIBLE EN EL INDEX NO SE QUE ESTE MAL SALUDOS

    • JesusAnFor 8 años

      Hola Juan, en primer lugar, gracias por tu visita y por el comentario.
      Imagino que te refieres al efecto cuarto al del texto deslizante, dime que es lo que te pasa exactamente ¿al quitar el puntero de la imagen el texto se queda Fijo?

  2. NESTOR 8 años

    Jesus como se puede hacer este tipo de efecto con las imagenes. Donde se coloca el curso en diferentes partes de la imagen y esta cambia con 4 imagenes diferentes. Gracias. Te dejo la pagina para que la mires, pasa el cursor dentro de las imagenes y te darás cuenta.

    http://www.dafiti.com.co/brahma/?gender=Masculino&page=2

  3. Teresa 7 años

    No me funciona, estoy utilizando chrome, no me funciona. 🙁

    • Autor
      Jesus AF 7 años

      ¿Que es lo que no te funciona???
      Perdona Teresa, pero si no me especificas un poco más no puedo ayudarte. 😕

  4. jose l 7 años

    hola jesus me gustaria que me pudieras explicar como se hace html y css de algo como esto http://www.tudekoras.com/editor_imagenes/index.php?id_soporte=2|1&tamanio=40×30 para un web de foto regalo para que puedan subir un foto y la puedan encuadrar e enviar

    • Autor
      Jesus AF 7 años

      Perdóname José, pero no se exactamente a que te refieres. o el enlace no es bueno o no lo entiendo bien, dime exactamente que es lo que necesitas para ayudarte, por favor.
      Un saludo.

      • jose 7 años

        hola jesus lo que necesito es un editor de fotos web para que me puedan mandar fotos por ejemplo un cliente quiere hacer una foto 30×40 pues abre la web elige el producto y manda la fotografia gracias

        • Autor
          Jesus AF 7 años

          Ok, José (es que al no estar registrado y logeado, yo no podía ver nada 🙁 ) pero ahora lo entiendo.
          Esto no es simplemete crear un código HTML y CSS, requiere mucho más.
          Te dejo un enlace a ver si esto te puede ayudar un poco y me dices si es lo que buscas, pero si no tienes muchos conocimientos, mejor es que hables con un desarrollador o un webmaster de confianza para que lo hagan ellos. Te evitarás disgustos y tensiones.
          Enlace http://www.scriptscenter.com.ar/2010/02/editor-de-imagenes-en-ajax-ajax-image.html
          Un saludo, José. Suerte y me cuentas si lo deseas

          • jose 7 años

            ok muchas gracias

          • Autor
            Jesus AF 7 años

            Un placer, José

  5. Paul 7 años

    Buenas Jesus, a mi el ejemplo de ZOOM EN LA IMAGEN, cuando meto la etiqueta:
    en el HTML no me hace el efecto, pero si lo remplazo por:
    me lo hace.

    Me han gustado los efectos Jesus, buen trabajo.

  6. Paul 7 años

    no se le el codigo que he escrito. pero lo que hago es cambiar en el html el class por id.

  7. Paul 7 años

    En el ejercicio del GIRO me pasa lo mismo. Remplazo class por id y me lo hace.

    • Autor
      Jesus AF 7 años

      Hola Paul.
      muchas gracias por tus comentarios y el trabajo es recopilatorio, por lo que no puedo atribuirme todo el merito.
      Reemplazando class por el ID, tienes razón, es un error mio y no me había dado cuenta hasta ahora. Realmente no hemos de usar ID para los estilos, ya que el identificador normalmente es para atribuir funciones de js / jquery (entre otros)
      cuando usamos class, el prefijo a de ser un punto, por ejemplo .estilo y con ID una almohadilla, por ejemplo #estilo
      si cambias en el CSS simplemente los puntos por las almohadillas funcionará.

      Nota: Ya está corregido el code en el post

      Una vez más, muchas gracias por los comentarios y la observación.
      Voy a corregir los estilos de CSS. 😉
      Un saludo.

  8. Miguel Ber 7 años

    Muy bonito!, estaba buscando algo así, para que se vean mejor los productos de una tienda al pasar el ratón por encima.
    Gracias por compartir.
    Saludos

  9. Perla 7 años

    Hola, disculpa, quisiera hacer el efecto de zoom, pero no me funciona, que es lo que estaré haciendo mal? te dejo el codigo…
    HTML:

    CSS:
    #container {
    width: 300px;
    margin: 0 auto;
    }
    .ex2 img{
    height: 100px;
    width: 300px;
    margin: 15px 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    }
    .ex2 img:hover {
    height: 133px;
    width: 400px;
    margin-left: -50px;
    }

    • Autor
      Jesus AF 6 años

      Hola Perla, no he estado muy activo últimamente, ya perdonarás.
      ¿que es lo que no hace? El código parece estar bien.

      De todas formas, pásame la dirección si es posible de la web o pégame también el archivo HTML donde van las imágenes.

      Un saludo

  10. Jair 6 años

    Buenas tardes Jesús,

    Muchas gracias por tu aportación. Me gustaría implementar algún efecto over mouse en mi web hecha con wordpress para 4 imágenes redondas de mi home. Sin embargo no se:

    – Ni donde debo copiar el código
    – Ni como indicarle cual es la imagen a la que quiero aplicar el efecto

    Debe ser muy evidente pero estoy recién llegado a este mundo.

    Muchas gracias

    • Autor
      Jesus AF 6 años

      Hola Jair.
      En primer lugar te diría que creases un theme hijo (chil) https://codex.wordpress.org/es:Temas_hijos luego, la parte de CSS la tendrás que añadir a la hoja style.css
      Averigua donde están las imágenes (Lo puedes hacer con “inspecionar elementos o herramientas de web master) y o bien usas los estilos que ya tienes o añades estilos en los contenedores < div >

  11. Edu 6 años

    Me ha dado un problema el tipo 4. El resultado visible en la web es algo asi:

    ( la imagen)
    y el texto debajo de la imagen.

    Imagino que no habrá algo bien en la primera linea de codigo

    Muchas gracias

    • Autor
      Jesus AF 6 años

      Es posible que sea el Float: o los anchos de la imagen, mira a ver si no sobrepasan medidas del contenedor donde están.
      Sino, pon aquí la URL de la web y te comento.

      Gracias Edu por el comentario.
      Un saludo

  12. Janpol Espinoza 6 años

    Buenas quisiera preguntarte que tengo mal

    tengo ese codigo y quiero lograr el efecto de zoom pero no me hace nada utilizo el notepad++
    estoy iniciando con esto de las paginas y quisiera saber cual es mi error gracias

    • Autor
      Jesus AF 6 años

      Hola Janpol. (perdona el retraso)
      Dime que es exactamente lo que haces, donde lo pones, como usas el CSS…
      Necesito un poco más de información para ayudarte.
      Puedes pasarme el código pegado aquí si quieres del HTML a ver si identificamos el fallo.

  13. Edgard PC 6 años

    Funciona muy bien. Gracias

    • Autor
      Jesus AF 6 años

      Gracias a ti Edgard, por tu comentario.
      Así da gusto hacer las cosas.
      Un saludo

  14. Geronimo 6 años

    Dude, me sirvieron mucho, muchas gracias 😉

  15. Gualapo 6 años

    Gracias Bro…..
    Si funcionan tus ejemplos.

  16. Gualapo 6 años

    Gracias Bro……..
    Están buenos tus ejemplos.
    Sigue haciendo mas.

    • Autor
      Jesus AF 6 años

      Muchas gracias. Me alegro de que te gusten.
      Saludos.

  17. Juan Fº 6 años

    Muy buena compañero, estaba buscando algo para wordpress que no fuera un plugin y va de maravilla, además se pueden mezclar y variar los efectos de transición sin problemas.

    Un saludo

  18. ivan 6 años

    HOLA, PARA QUE FUNCIONE EL CODIGO TENGO QUE METER LOS 2 CODIGOS , OSEA HTML Y CSS.?
    O LO PUEDO HACER CON HTML Y CSS , SON APARTE LOS 2?

  19. Alice 5 años

    Me encanta el ejemplo 4…. muchas gracias por compartirlo.
    Pero me gustaria saber como podria darle fondo al texto lo he intentado todo pero nada me funciona.
    espero puedas ayudarme.

  20. Ines 3 años

    Pienso que las previsionesde AMT para el 2017 son más conservadoras que este año que acaba.
    No quiere pillarse los dedos, perfectamente normal.

    http://Www.Caesaremnostradamus.com/

Contesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

©2013 - 2021 Jesús AF - WEB

Uso de cookies

Este sitio web utiliza cookies, tanto propias como de terceros (Google Analytics), para recopilar información estadística sobre su navegación generada a partir de las pautas de esta. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

- SÁQUEME DE AQUÍ - ACEPTAR

Aviso de cookies

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?

Create Account