This issue is driving me nuts:
I'm attempting to rotate the border of a circle element and simultaneously adjust the opacity of the circle overlay when a user hovers over it. However, in my current setup, only the opacity changes:
<div id="main-circle">
<a class="circle-container" href="#">
<div class="circle-border"></div>
<div class="image-overlay" style="background-image:url(http://manuel-haug.de/img/circle-placeholder.png)"></div>
<div class="circle-overlay"></div>
</a>
</div>
When I change the order of elements like this:
<div id="main-circle">
<a class="circle-container" href="#">
<div class="image-overlay" style="background-image:url(img/circle-placeholder.png)"></div>
<div class="circle-overlay"></div>
<div class="circle-border"></div>
</a>
Then the border rotates, but the overlay isn't visible.
Here's my CSS code:
.circle-container
{
(CSS properties)
}
.circle-border
{
(CSS properties)
}
.circle-border:hover
{
(CSS properties)
}
.circle-overlay
{
(CSS properties)
}
.circle-overlay:hover
{
(CSS properties)
}
.image-overlay
{
(CSS properties)
}
To see an example of my problem, I've created a JSFiddle.
Hoping someone can provide assistance.