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.
.hover()
de JQuery, asignándole al h1 y al img un id por separado y trabajándolos de acuerdos a tus necesidades