Dear Federico De Luca,
Please do the following steps to show the title in a position absolute over the image before the animation.
- go to your_site\modules\mod_sj_k2_extraslider\assets\css\css3.css finding:
.sj-extraslider .extraslider-inner .item-wrap.style11 .item-info {
position:absolute;
top:0;
left:0;
height:100%;
text-align:center;
padding:0;
background-color:#333;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
=>
.sj-extraslider .extraslider-inner .item-wrap.style11 .item-info {
position:absolute;
top:0;
left:0;
height:100%;
text-align:center;
padding:0;
background-color:none transparent;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
----------------------
.sj-extraslider .extraslider-inner .item-wrap.style11:hover .item-info {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg);
-moz-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
=>
.sj-extraslider .extraslider-inner .item-wrap.style11:hover .item-info {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg);
-moz-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
background-color:#333;
}
---------------------------
.sj-extraslider .extraslider-inner .item-wrap.style11 .item-title {
background:#FFF;
opacity:0.5;
filter: alpha(opacity=50);
font-size: 17px;
margin-top: 5%;
padding: 5px;
text-align: center;
text-transform: uppercase;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
=>
.sj-extraslider .extraslider-inner .item-wrap.style11 .item-title {
background:#FFF;
opacity:0.5;
filter: alpha(opacity=50);
font-size: 17px;
margin-top: 0;
padding: 5px;
text-align: center;
text-transform: uppercase;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Thanks!
