1

estoy intentando hacer un efecto hover que pase desde una imagen con texto a la misma imagen pero con otro texto, no se si me explico. El problema es que no se por que al superponer la segunda imagen no se pone en el mismo sitio que la primera, sino un poco mas arriba, a pesar de que estoy poniendo la misma imagen. A parte estoy intentando que el primer hover ocupe el 66% del width de la pagina y el segundo hover el 33%.Mi codigo es el siguiente:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css?family=Mystery+Quest");

.container2{
    position:relative;
    width:66.9%;
    float:left;
}

.container3 {
    position:relative;
    width: 32.1%;
    float:right;
}

.image {

}

.overlay {
  position: absolute;
  top: 1000;
  bottom: 0;
  left:0 ;
  right: 0;
  opacity: 0;

}

.container2:hover .overlay {
  opacity: 1;
}

.container3:hover .overlay {
  opacity: 1;
}
.text {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Noto Serif KR', serif;


}
</style>
</head>
<body>

<div class="container2">
  <a href="marca.com"><img src="imagenes/imagen1.png" alt="jaj" class="image">
    <div class="text">Texto 1</div>
  <div class="overlay">
    <a href="for-him"><img src="imagenes/imagen1.png" alt="me" class="image">
    <div class="text">texto 2</div>
  </div>
</div>
<div class="container3">
  <a href="for-her"><img src="imagenes/imagen2.png" alt="jaj" class="image">
    <div class="text">texto 1</div>
  <div class="overlay">
    <a href="feo.com"><img src="imagenes/imagen2.png" alt="me" class="image">
    <div class="text">texto 2</div>
  </div>
</div>

</body>
</html>

Muchas gracias

1 respuesta 1

0

He visto que no cierras los <a>, también he visto que puede que no necesites el <div class="overlay">, simplemente creando una segunda con los mismos estilos que la clase 'text' pero cambiando la propiedad de opacity del 'text-2' Te dejo el código que he probado, si no aplicas ninguna transición en la aparición del texto también podrías poner un display: none en vez de opacity: 0, y un display: block en vez de opacity: 1.

<!DOCTYPE html>
<html>
<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    @import url("https://fonts.googleapis.com/css?family=Mystery+Quest");
    .container2{
        position:relative;
        width: 66.9%;
        float:left;
    }
    .container3 {
        position:relative;
        width: 32.1%;
        float:right;
    }

    .image {
        z-index: 0;
    }
    .text, .text2 {
        color: white;
        font-size: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        font-family: 'Noto Serif KR', serif;
        z-index: 1;
    }
    .text-2 {
        opacity: 0;
        z-index: 2;
    }
    .container2:hover .text-2 {
        opacity: 1;
    }

    .container3:hover .text-2 {
        opacity: 1;
    }
    .container2:hover .text-1 {
        opacity: 0;
    }

    .container3:hover .text-1 {
        opacity: 0;
    }
</style>

</head>

<body>

  <div class="container2">
    <a href="marca.com">
      <img src="imagenes/imagen1.png" alt="jaj" class="image">
      <div class="text">Texto 1</div>
      <div class="text-2">texto 2</div>
    </a>
  </div>

  <div class="container3">
    <a href="for-her">
      <img src="imagenes/imagen2.png" alt="jaj" class="image">
      <div class="text">texto 1</div>
      <div class="text-2">texto 2</div>
    </a>
   </div>

</body>
</html>
3
  • creo que no me entendiste, el hover que necesito es un hover que cambie la imagen con el texto "texto 1" por la misma imagen pero que ponga "texto 2". Con el codigo que me has proporcionado, el segundo texto te lo pone debajo de la imagen. Es por ello que puse el div overlay, porque supuestamente es la imagen que sustituye a la primera. Gracias el 31 may. 2020 a las 23:52
  • He actualizado el código, ahora sólo se muestra el texto 2 y ocultamos el texto 1 con opacity: 0. No hace falta que cargues 2 veces la imagen, si puedes ocultar el primer texto y mostrar el segundo.
    – Kiku Solé
    el 1 jun. 2020 a las 10:40
  • sigues sin entenderme jaja, el texto 2 lo necesito dentro de la imagen sustituyendo a al texto 1, no se si me explico, tu codigo hace que texto 2 se situe fuera de la imagen, necesito que texto 2 sustituya y quite a texto 1 cuando pase el cursor por encima. Gracias, espero haberme explicado bien :) el 1 jun. 2020 a las 11:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.