Pure CSS :hover display: - html

Question

I'm a general newbie running into a problem on my hand-coded site.
I intended for a div to change to an arrow when hovered over with the div being an anchor link. It seems simple enough but somewhere along in my build only the paragraph of the div started reacting to a mouse hover. The image does not react to the hover which is what I intended. I have no idea what's causing it. (Or the jumpiness that occurs when the larger images are hovered over.)
The page is here: http://www.tarynblake.com/projects/webapps.html
Here's the related 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>
Here's the CSS:
.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;
}

Answer 1

If you're just looking to swap out the image on hover, then you have possibly over-coded your solution.
What you want to do is take your .top class and add the image using CSS like so:
.top {
background-image: url ('/img/projects/code-blue-gray.png');
background-repeat: no-repeat;
max-height: 300px;
max-width: 90vw;
opacity: .65;
filter: alpha(opacity=30);
box-shadow: 10px 10px 10px 0 #3f3f3f;
}
Then for the hover state, add the next image in the sequence.
.top:hover {
background-image: url ('/img/projects/arrow-red.png');
background-repeat: no-repeat;
max-height: 300px;
max-width: 90vw;
opacity: .65;
filter: alpha(opacity=30);
box-shadow: 10px 10px 10px 0 #3f3f3f;
}
You could add CSS animation transitions or other effects to swap out the image, but this is a very basic overview. Hopefully this helps.

Answer 2

I found the simplest way of doing an image swap on hover is through the CSS.
<div class="image-swap"></div>
.image-swap {
width: 200px;
height: 200px;
background-image: url(images/stradegy-image-hover.jpg);
background-position: 0 0;
}
.image-swap:hover {
background-position: 0 100%;
}
Here's a way to do with CSS3 but remember that IE doesn't play well with CSS3. http://jsfiddle.net/gd8ba/
The "jumping" in your site could be from different size images and or from removing the words "web apps". Also, I noticed you have a js error. TypeError: Cannot set property 'innerHTML' of null http://www.tarynblake.com/js/myScripts.js:17