I have successfully implemented a functionality, but I am looking to enhance the appearance of the text displayed when an image is hovered over. Below is the current code snippet:
.ecommerce-categories [class^=col-] > a:before {
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 50px 20px;
color: #fff;
word-wrap: break-word;
overflow: hidden;
background-color: rgba(0,0,0,0.4);
opacity: 0;
-webkit-transition: all .7s ease;
transition: all .7s ease;
}
.ecommerce-categories [class^=col-] > a:hover:before {
opacity: 1;
}<div class="col-lg-4 categories">
<a href="#" data-text="Day for rafting and outdoor activities" style="background: url('images/catagories/cat-rafting.jpg') no-repeat center center; background-size: cover;" >I am seeking guidance on how to allow HTML tags within the 'data-text' attribute. Can you advise on how I can modify the existing code to achieve this feature? (data-text="Day for rafting and outdoor activities").
Your assistance is greatly appreciated.