Trying to solve a unique problem, I am seeking advice:
On my website, I have included a 300 x 300 Pixel square png-image of a circle. Utilizing Zurb's Foundation 5.0.2 as a CSS Grid basis.
My objective is to create a CSS-border around the circle and incorporate an opacity-effect that only reveals the image fully upon hovering with the mouse. Importantly, the surrounding CSS-border and background should remain unaffected by this hover effect. Refer to the links for visual examples.
This is what I have so far in terms of code:
HTML:
<div class="large-4 columns" id="border">
<div id="foto"><img src="/img/test.png" alt="Portrait" width="300" height="300"></div>
</div>
CSS:
#border #foto {
border-radius: 50%;
width: 300px;
height:300px;
background: #1ABC9C;
border: 15px solid #34495E;
}
#foto:hover {
opacity: 1.0;
}
#foto {
opacity:0.5;
}
The current code successfully displays the border around the circle, but applies the hover effect to both the border and the image:
If I adjust the CSS in a certain way, it does apply the hover effect solely to the picture, however, it decreases the size of the image and loses its centered display:
#border {
border-radius: 50%;
width: 300px;
height:300px;
background: #1ABC9C;
border: 15px solid #34495E;
}
I would greatly appreciate any guidance on how to properly display the image and implement the intended hover effect.
Thank you sincerely.