I have the code below and I can't make it like so: when I hover .iconanim the imageshdrq to appear. I tried different things but couldn't make it done. Can someone guide me to the result that I want ? I tough that adjusting the height of .imageshdr will make it work but still no results.
.iconanim:hover + .imageshdr{
opacity: 1;
transition: 0.5s ease;
}
.test{
background: url('https://i.imgur.com/oKe8JBR.png');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
outline: none;
cursor: pointer;
transition: 0.5s ease;
}
.test2{
background: url('https://i.imgur.com/UZhKDMu.png');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
outline: none;
cursor: pointer;
transition: 0.5s ease;
}
.test3{
background: url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
outline: none;
cursor: pointer;
transition: 0.5s ease;
}
.imageshdr{
opacity: 0;
position: absolute;
display: inline-block;
width: 340px;
transition: 0.5s ease;
height: 100px;
right: 3%;
bottom: 24%;
}
.imageshdr:hover{
opacity: 1;
}
<div class="imageshdr"><button class="test"></button>
<button class="test2"></button>
<button class="test3"></button></div>
<div class="headerchanger"><div class="iconanim">Test</div>