Utilizing AngularJS to dynamically create a table using ngRepeat when new data is fetched through Ajax. Each row of the table contains an image element.
In specific scenarios, I aim to overlay another image (mainly transparent with condition indicator icon) directly on top of the main image.
Presently, utilizing a JavaScript solution where an event handler is assigned to the image load event for positioning the overlay image at the same location as the main image. Although functional, it requires the use of $apply to ensure all images are rendered in the DOM before attaching the load event.
Curious if there exists a pure HTML/CSS approach to this issue?
Ideally, maintaining the overlay image always positioned precisely over the main image.
This way, binding ngShow to the condition could bypass any JavaScript workarounds.
ETA: snippet from the table code (within ngRepeat):
<div class="movie-cover">
<img class="movie-image" ng-src="{{movie.ImageUrl}}" onerror="this.src='@Url.Content("~/Content/images/titleimages/NoImage.jpg")'" />
<img class="selected-image dontshow" src="@Url.Content("~/Content/images/Selected.png")" data-hh-id="{{movie.ID}}" />
<a class="movie-link" href="{{movie.ImdbUrl}}" target="_blank">IMDb</a>
</div>Desiring the image labeled 'selected-image' to be displayed on top of the other.