New to coding and encountering a challenge with my hand-coded website.
My goal was for a div to change into an arrow when hovered over since the div acts as an anchor link. However, during the build process, only the paragraph inside the div responds to mouse hover. The image does not react as intended. I am unsure about what is causing this issue. (Also, there is some jerkiness observed when hovering over larger images.)
You can view the page here:
Here's the relevant HTML:
<a href='/projects.html'>
<div class="two-sides">
<img id="coding" class="top" src="/img/projects/code-blue-gray.png">
<img class="bottom arrow" src="/img/projects/arrow-red.png">
<p class="title">Web Apps<br> </p>
</div>
</a>
Below is the CSS used:
.top {
max-height: 300px;
max-width: 90vw;
opacity: .65;
filter: alpha(opacity=30);
box-shadow: 10px 10px 10px 0 #3f3f3f;
}
.two-sides:hover .bottom {
display: block;
}
.two-sides:hover .top {
display: none;
}
.two-sides:hover img[src*="arrow"] + .title {
visibility: hidden;
}
.bottom {
display: none;
max-height: 300px;
max-width: 90vw;
margin: 0;
padding: 0;
opacity: .65;
}
.arrow {
height: 40px;
max-width: 100px;
margin: 2.5vh 0 2.6vh 1vw;;
padding: 10px 13px;
border: 3px hidden #973c13;
opacity: .8;
}