How to fix hover that effects an element in a container - html

Question

I need to scale an image when I hover button/block that contains it but It doesn't work.
If I hover only image it scales perfectly but when I try to hover block it doesn't affect image.
So it will be like: hover button - image animation plays.
I expect that hovering block/button will affect image
.cont {}
.btn-1 {
font-family: 'Exo 2', sans-serif;
font-size: 18px;
width: 350px;
height: 100px;
background-color: #f790b0;
margin-bottom: 5px;
border: none;
}
.square {
width: 100px;
height: 100px;
background-color: #f58;
position: absolute;
}
img {
z-index: 4;
position: absolute;
width: 60px;
height: 60px;
padding: 20px;
transition: 0.7s;
}
.btn-1:hover~img {
transform: scale(1.2, 0.5);
}
span {
margin-left: 20px;
}
<link href="https://fonts.googleapis.com/css?family=Exo+2:400,700&display=swap&subset=cyrillic" rel="stylesheet">
<div class="cont">
<div class="block">
<div class="square"><img src="https://sandtonchronicle.co.za/wp-content/uploads/sites/33/2015/01/Facebook-logo-thum_621307002-423x317.jpg"></div>
<button class="btn-1">
Избранное
</button>
</div>
</div>

Answer 1

First you have to move the button and the square. Because with css, the previous element cannot be selected. Then the css should be like this. .btn-1:hover~.square img Then I took the picture before using row-reverse.
.btn-1 {
font-family: 'Exo 2', sans-serif;
font-size: 18px;
width: 350px;
height: 100px;
background-color: #f790b0;
margin-bottom: 5px;
border: none;
}
.block {
display: inline-flex;
flex-direction: row-reverse;
}
.square {
width: 100px;
height: 100px;
background-color: #f58;
}
img {
z-index: 4;
position: absolute;
width: 60px;
height: 60px;
padding: 20px;
transition: 0.7s;
}
.btn-1:hover~.square img {
transform: scale(1.2, 0.5);
}
span {
margin-left: 20px;
}
<div class="cont">
<div class="block">
<button class="btn-1">
Button
</button>
<div class="square"><img src="https://picsum.photos/200"></div>
</div>
</div>

Answer 2

To use sibling selector, the element has to be after the hovered element, not before. After tweaking your code a little bit,
HTML
<div class="cont">
<div class="block">
<button class="btn-1">
Избранное
</button>
<div class="square">
<img src="https://picsum.photos/100">
</div>
</div>
</div>
CSS
.btn-1 {
font-family: 'Exo 2', sans-serif;
font-size: 18px;
width: 350px;
height: 100px;
background-color: #f790b0;
margin-bottom: 5px;
border: none;
}
.square {
width: 100px;
height: 100px;
background-color: #f58;
position: absolute;
top: 0;
}
div.block{
position: relative;
}
img {
z-index: 4;
position: absolute;
width: 60px;
height: 60px;
padding: 20px;
transition: 0.7s;
}
.btn-1:hover ~ div img{
transform: scale(1.2, 0.5);
}
span {
margin-left: 20px;
}
Codepen: https://codepen.io/ashfaq_haq/pen/YzzQJBd