<!-- Hover Image Style 1 - Build 1 -->
<div id="pluginAppObj_stiac_hover_image">
   <div class="container style-1 no-touch">
      <figure id="pluginAppObj_stiac_hover_image-figure">
          <div class="image-container">
            <!-- Link Immagine -->
            <img class="image" src="https://images.unsplash.com/photo-1605735361719-e1cd1d5ce0b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
					</div>
             <figcaption id="pluginAppObj_stiac_hover_image-caption" class="figure-caption">
                 <div class="title">Product Name</div><span class="text">The product description</span>
                     <!-- Collegamento Link -->
						         <a href="https://www.stiac.it/store.php" >BUY NOW BUTTON</a></figcaption>
      </figure>
  </div>
</div>

#pluginAppObj_stiac_hover_image {
    z-index: 4;
}
    
#pluginAppObj_stiac_hover_image .container {
    box-sizing: border-box;
   position: relative;
    width: 500px;
    max-width: 100%;
    margin: 0;
    
}

#pluginAppObj_stiac_hover_image figure {
	margin: 0;
	position: relative;
    height: 500px;
    background: transparent;
}

#pluginAppObj_stiac_hover_image figure .image-container {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  /***/
  
}

#pluginAppObj_stiac_hover_image figure img {
    max-width: 100%;
}

#pluginAppObj_stiac_hover_image figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 15px;
	background:#96396d;
    box-sizing: border-box;
}

#pluginAppObj_stiac_hover_image figcaption .title {
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 1);
    font-family: Arial;
    font-size: 28pt;
    font-weight: bold;
    font-style: normal;
    word-wrap: break-word; 
    overflow: hidden;
}

#pluginAppObj_stiac_hover_image figcaption .text {
	color: rgba(255, 255, 255, 1);
    font-family: Arial;
    font-size: 14pt;
    font-weight: normal;
    font-style: normal;
    word-wrap: break-word; 
    overflow: hidden;
}

#pluginAppObj_stiac_hover_image figcaption a {
	text-align: center;
    padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
	display: inline-block;
	background: rgba(0, 0, 0, 1);
	color: rgba(255, 255, 255, 1);
    font-family: Arial;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    word-wrap: break-word; 
    overflow: hidden;
}

/* Caption Style 1 */
#pluginAppObj_stiac_hover_image .style-1 figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	height: 100%;
	width: 100%;
	opacity: 0;
	text-align: center;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

#pluginAppObj_stiac_hover_image .no-touch.style-1 figure:hover figcaption,
#pluginAppObj_stiac_hover_image .style-1 figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: translate(15px, 15px);
	-moz-transform: translate(15px, 15px);
	-ms-transform: translate(15px, 15px);
	transform: translate(15px, 15px);
}

#pluginAppObj_stiac_hover_image .style-1 figcaption span {
	display: block;
}

#pluginAppObj_stiac_hover_image .style-1 figcaption a {
	margin-top: 2em;
}