2

introducir la descripción de la imagen aquí

Quiero que al hacer un hover en el h1, la img se agrande, pero no se como hacerlo solo con css. Como información adicional estoy usando Foundation.

El código de css que he pensado es algo así como

section.destacada h1:hover >(section.destada img[src="img/h_index.jpg"]){ filter: blur(5px); }

3
  • Prueba con .hover() de JQuery, asignándole al h1 y al img un id por separado y trabajándolos de acuerdos a tus necesidades Commented el 8 sept. 2018 a las 0:48
  • @RubenHernandez No funciona así :c
    – Ric-san
    Commented el 8 sept. 2018 a las 1:13
  • @PauloUrbanoRivera no puedo usar nada que no sea css y html
    – Ric-san
    Commented el 8 sept. 2018 a las 1:14

4 respuestas 4

6

Siento decirlo @Ric-san pero con la forma que tienes en el HTML no puedes lograr lo que quieres con CSS. Actualmente con CSS3 en su última versión no tiene una forma de controlar un elemento anterior en el html. Tienes si o si, que hacerlo via Jquery así:

$('.text-center h1').hover(function(){
  $('.destacada img').css({
    "width": "100px", //O lo que desees
    "height": "100px" //O lo que desees
  });
});

Sin embargo, en los comentarios haces ver que puedes, tienes y/o quieres hacerlo via solo manipulando el html y el css, para esto, si es posible mover la etiqueta img, te sugiero estas dos opciones para lograrlo via solo css:

Forma 1

Ubica la etiqueta <img> debajo del h1 y dentro del <div class="contenido text-center">, así:

<section class="destacada">
  <div class="pattern"></div>
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
    <img src="http://picsum.photos/100/100"/>
  </div>
</section>

De esta forma, en el css solo tienes que usar el selector:

.contenido.text-center h1 ~ img{
  width: 200px; /*O lo que quieras*/
  height: 200px; /*O lo que quieras*/ 
}

Ejemplo:

.destacada img{
  width: 50px;
  height: 50px;
}

.contenido.text-center h1:hover ~ img{
  width: 200px; /*O lo que quieras*/
  height: 200px; /*O lo que quieras*/ 
}
<section class="destacada">
  <div class="pattern"></div>
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
    <img src="http://picsum.photos/100/100"/>
  </div>
</section>       

Y si quieres que la imagen se muestre antes que el título, pues alterar el orden usando flexbox y el atributo order, así:

.destacada img{
  width: 50px;
  height: 50px;
  transition: all ease .1s;
}

.contenido.text-center h1:hover ~ img{
  width: 100px; /*O lo que quieras*/
  height: 100px; /*O lo que quieras*/ 
}

/*Abajo los estilos para cambiar el orden de los elementos*/

.contenido.text-center{
  display: flex;
  flex-direction: column;
}

.contenido.text-center *{
  order: 1;
}

.contenido.text-center h1{
  width: 100%;
  order: 2;
}
<section class="destacada">
  <div class="pattern"></div>
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
    <img src="http://picsum.photos/100/100"/>
  </div>
</section>

Y aunque logres cambiar el orden, ahora tendrás un problema ya que si cambias el tamaño de la imagen, esta al crecer empujara hacia abajo el título, lo que causara que ya no estés sobre este y la imagen vuelva a encogerse y al encogerse otra el estarás sobre el título y obligarás a la imagen a crecer de nuevo, así sucesivamente, lo que parece un error.

¿Hay una forma de corregir esto?

Si, si la hay, usando transform: scale(x) en vez de width y height;

Ejemplo:

.destacada img{
  width: 100px;
  height: 100px;
  transform: scale(.5); /*Esto significa que por defecto estara a la mitad del tamaño*/
  transition: all ease .1s;
}

.contenido.text-center h1:hover ~ img{
  transform: scale(1); /*Esto para recuperar el tamaño original*/
}

/*Abajo los estilos para cambiar el orden de los elementos*/

.contenido.text-center{
  display: flex;
  flex-direction: column;
}

.contenido.text-center *{
  order: 1;
}

.contenido.text-center h1{
  width: 100%;
  order: 2;
}
<section class="destacada">
  <div class="pattern"></div>
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
    <img src="http://picsum.photos/100/100"/>
  </div>
</section>

Segunda FORMA

También puedes lograr el mismo efecto, pero colocando la imagen debajo del <div class="contenido text-center"> simplemente la imagen se verá afectada sólo cuando se coloquen encima del div y por consiguiente del título.

Es decir, en el html sería:

<section class="destacada">
  <div class="pattern"></div>
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
  </div>
  <img src="http://picsum.photos/100/100"/>
</section>

Y en el css, solo debemos aplicar los mismos estilos que te mostraba en la forma anterior, pero el :hover se aplica sobre el selector del class="contenido text-center"> y no del`, ejemplo:

.destacada{
  display: flex;
  flex-direction: column;
}
.destacada *{
  order: 1;
}

.destacada .contenido.text-center{
  order: 2;
}

.destacada img{
  width: 100px;
  height: 100px;
  transform: scale(0.5);
  transition: all ease .3s;
}

.contenido.text-center:hover ~ img{
  transform: scale(1);
}
<section class="destacada">
  <div class="pattern"></div>
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
  </div>
  <img src="http://picsum.photos/100/100"/>
</section>

Cualquier duda, puedes usar la caja de comentarios.

0

Puedes añadir escuchas de eventos al div que necesitas y ejecutar cualquier función, en este caso, una que afecte a otro div

var sobremi = document.getElementById("sobremi");
var afectado = document.getElementById("afectado");
sobremi.addEventListener("mouseover", () => {
  afectado.className = "afectado";
}, false)
sobremi.addEventListener("mouseout", () => {
  afectado.className = "";
}, false)
.afectado {
  background: red
}

.afectado2 {
  background: blue
}
<div id="sobremi">
  Pasa el mouse sobre mí
</div>

<div id="afectado">
  y yo me veré afectado
</div>

1
  • 2
    no puede usar javascript según el comenta mas abajo. Commented el 8 sept. 2018 a las 1:31
0

Tomando en cuenta lo que has posteado hasta donde tengo conocimiento es a afectar el hermano del el elemento sobre el que hagas hover de la siguiente manera;

h1.estilo:hover ~ img { transform: scale(1.2); }

ahora bien para que esto funcione tu elemento <img> tiene que ser hermano del h1, quedaria asi;

<section class="destacada"> 
    <div class="pattern"></div>
    <h1 class="estilo">auida</h1>
    <img src="img.jpg">
</section>

Nota que he removido el elemento padre que envolvia tu elemento <h1>

Ahora imaginemos que el elemento sobre el que quieras aplicar el efecto es un hijo directo de tu <h1>;

h1.estilo:hover > img {  transform: scale(1.2); }

tu html deberia estar asi;

<section class="destacada"> 
    <div class="pattern"></div>

    <h1 class"estilo">
     auida
     <img src="img/h_index.jpg">
   </h1>
</section>

Esto ultimo no es del todo correcto pero sirve como ejemplo didáctico.

2
  • He intentado hacerlo como tu dices, pero tampoco se puede, el <div class="contenido text-center"> Es necesario.
    – Ric-san
    Commented el 8 sept. 2018 a las 1:42
  • @Ric-san Siento decírtelo pero no existen selectores "Hacia atrás" en css, eso se debe hacer con ayuda de javascript, pero des afortunadamente tampoco lo puedes usar. Commented el 8 sept. 2018 a las 1:56
0

Si el cubo está directamente en el contenedor: #container:hover > #cube { background-color: yellow; }

Si el cubo es la siguiente (después de los contenedores de la etiqueta de cierre) el contenedor: #container:hover + #cube { background-color: yellow; }

Si el cubo está en algún lugar en el interior del contenedor: #container:hover #cube { background-color: yellow; }

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 26 sept. 2022 a las 22:27

Tu Respuesta

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

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