Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeForum
Welcome, Guest

Title shown also before animation
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Title shown also before animation

Title shown also before animation 10 years, 6 months ago #12602

Good morning,

i would like the title of each article shown over the image also before the animation.

Because some users don't understand the onmouse over.

Consider that i need an animated layout (like 3-4-5-6-7), not static one (like 1-2).

I know that i have to change php code but i can't understand where or how.

Thank you very much,

F.

Re: Title shown also before animation 10 years, 6 months ago #12613

Hi Federico De Luca,

Could you please send url to each corresponding layout (like 3-4-5-6-7) to us ?

Thanks!

Re: Title shown also before animation 10 years, 6 months ago #12615

Yes...i send you 2 link..

for example this is an animated layout (number 7):
www.gazzotti.it/extraresistent.html

or this (number 3):
www.gazzotti.it/myvintage.html

I need to show the title in a position absolute over the image before the animation.
So an animation with only the read more for example...

Re: Title shown also before animation 10 years, 6 months ago #12708

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!
  • Page:
  • 1
Time to create page: 0.22 seconds

Notification

Please find your issue via Suggested Posts before submitting your question. We have solved the most of issues and maybe your issue was solved before.

Latest My Topics

No posts to display.

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes