Set a class on an image within a loop - css

Question

I am not experienced with coding at all. I just copy/paste template examples that I find on the internet and that has worked fine so far. However, there is a new problem that I am unable to solve.
The short question is, how can I set the css class of an image outside the <"img">?
For example, this is the code that I have, and does not work:
$class_key= "top".(string)$count;
$returnarray[$level_key]='<img class=$class_key src=http://somepic.jpg width=100px height=100px/>';
If you want more details, I explain below:
I am layering images, and the position of the top images is randomly determined. I am using a css code to name and define the layers:
<style type="text/css">
.bottom
{position:absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.top1
{
position:absolute;
top: 100px;
left: 100px;
z-index: 2;
}
.top2
{
position:absolute;
top: 100px;
left: 100px;
z-index: 2;
}
And the variable $count is randomly determined. If I explicitly write class="top1" or class="top2", the code works.
Please help me. Thanks

Answer 1

Assuming that you are using PHP...
You are using single quotes on $returnarray[$level_key]='<img class=$class_key.../>'; then $class_key is not interpreted.
You can use the following:
Single quotes concatenating the variable:
`$returnarray[$level_key]='<img class="' . $class_key . '".../>';`
or double quotes
`$returnarray[$level_key]="<img class=\"{$class_key}\".../>";`
or another way using double quotes
`$returnarray[$level_key]="<img class=\"$class_key\".../>";`
See similar: PHP: Using a variable inside a double quotes
To better manage your CSS:
Add a generic class to your $class_key
$class_key= "img-top top".(string)$count;
Then the CSS rules will work for any image that contains img-top class:
.img-top{
position:absolute;
top: 100px;
left: 100px;
z-index: 2;
}
Also you can wrap your loop content inside a div
<div class="img-top">
[loop logic]
</div>
And define the CSS for all images inside it:
.img-top img{
position:absolute;
top: 100px;
left: 100px;
z-index: 2;
}