I came across a solution on this question here, outlining how to implement an overlay hover remove icon on thumbnails. I tried incorporating it into my page, along with fancybox, but unfortunately, I'm encountering issues getting both functionalities to work simultaneously. The problem seems to stem from the fact that they both require the use of the <a> element.
This is what my current code looks like:
<div class="image-thumb" style="display: inline-block; background-image: url('<?php echo base_url().$path.$thumb; ?>');" align="center">
<a class="fancybox" href="<?php echo base_url().$path.$file->filename; ?>" rel="galery1" title="<?php echo $file->description; ?>">
</a><br>
<?php echo $file->description; ?></strong>
</div>
The CSS associated with the implementation is as follows:
.image-thumb {
position: relative;
width: 150px;
height: 150px;
background: transparent url() no-repeat center center;
}
.image-thumb a {
display: none;
position: absolute;
top: 2px;
left: 126px;
width: 22px;
height: 22px;
background: transparent url('/path/to/remove-icon.gif') no-repeat 0 0;
}
.image-thumb:hover a {
display: block;
}
Upon experimenting with the <a> element by setting the class to either fancybox or removing it altogether, I observed that only one of the functionalities would work at a time. I'm currently feeling stuck and seeking assistance in resolving this issue. Any suggestions would be highly appreciated.