Change picture by hovering over text - html

Question

I want to change the displayed image, when the curosor is hovering over the a tag with plain css
My guess was to write something like this, but it didnt work:
.folder a:hover > .folder img{
content: url(new picture);
}
here is my code
html:
<div>
<div class="folder">
<img></img>
folder1
</div>
...
</div>
css:
.folder img{
content:url(pictures/folderdarkblue.png);
}

Answer 1

It will be quite hard to do that using plain css with your current html code due to css not really allowing backward navigation. If you don't mind using the <a> after your image, you could try doing this:
https://jsfiddle.net/ksec65wm/
<div class="folder">
folder1
<img class='one' src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class='two' src="http://www.w3schools.com/images/colorpicker.png"/>
</div>
CSS:
img.one {
display:none;
}
a:hover ~ img.one {
display: inline-block;
}
a:hover ~ img.two {
display:none;
}

Answer 2

Instead of trying to change picture on the hover of each individual div, why don't you try setting the opacity to 0, and then add the next picture?
Some hints
.box-container:hover .image-container,
.box-container:hover #picture {
opacity: 0;
}
Heres an example I found that is quite nice as well
https://jsfiddle.net/m4v1onyL/
The basic css goes as the following
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
As you can see we just toggle between two images like this in an <a> tag.