<div class="gallery">
<a tabindex="1"><img src="images/smile.jpg"></a>
<a tabindex="1"><img src="images/smile.jpg"></a>
<a tabindex="1"><img src="images/smile.jpg"></a>
<a tabindex="1"><img src="images/smile.jpg"></a>
</div>
a{
float:left;
width:25%;
height:25%;
position:relative;
border:1px solid #333;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
a img{
display:block;
width:100%;
height:100%;
-webkit-transition-property:width, height;
-webkit-transition-duration:300ms;
-moz-transition-property:width, height;
-moz-transition-duration:300ms;
-o-transition-property:width, height;
-o-transition-duration:300ms;
position:absolute;
z-index:1;
opacity:0.3;
cursor:pointer;
}
This is a question from a beginner who is seeking help with CSS.
The goal is to apply the CSS provided above only to the elements within the gallery class, as it is currently affecting all link elements on the page.
If you have any suggestions or solutions, your assistance would be greatly appreciated. Thank you.