I've been experimenting with changing the opacity of a div element when you click on an img element using JavaScript or jQuery. I'm not sure if this is achievable with CSS or HTML alone, so if you have any insights, please share! Here's the current code I'm working with:
<div class="scene" id="scene">the text</div>
<!--the text element I'm attempting to modify-->
<img src="zyro-image (7) (1).png" id="look" class="look"><img>
<!--the img element; clicking it changes the div element's opacity-->Styles ⬇️
.scene{
font-family: 'Common Pixel', sans-serif;
background-color:black;
border: 2px;
color: white;
padding-top: 10px;
padding-bottom: 25px;
width: 350px;
opacity: 0;
}
<!--____________________-->
.look{
height: 100px;
position: relative;
left: 10px;
top: -685px;
margin-top: auto;
z-index: 1;
transition: top, 1s;
}
.look:hover{
top: -692px;
}
Here are some methods I've attempted:
(These ideas were gleaned, if not entirely, from stackoverflow)
1.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.look').active(function(){
$('.scene').css('opacity', '1');
});
</script>
This approach didn't seem to work; no visible change occurred.
2.
<script>
function myFunction()
{
document.getElementById('scene').setAttribute("class", "scene2");
}
</script>
<styles>
.scene2{
font-family: 'Common Pixel', sans-serif;
background-color:black;
border: 2px;
color: white;
padding-top: 10px;
padding-bottom: 25px;
width: 350px;
opacity: 1;
}
</styles>
Similar to the previous attempt, there was no noticeable change.
3.
<script>
function change_css(){
document.getElementById('result').style.cssText = 'font-family:'Common Pixel', sans-serif; background-color:black; border:2px; color:white; padding-top:10px; padding-bottom:25px; width:350px; opacity:1;';
}
</script>
Unfortunately, this method also failed to produce the desired effect.