Happy Children's Day 2020! Up to 50% OFF Storewide!
0
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeForum

We are here to serve :)

Our support team is currently online to solve your issues.

Our support team is currently offline

Our support heroes might not be around this hour. Please expect some delays.

Our support is available from

Monday - Friday 8am - 5:30pm GMT+7

Your time: 00:00:00
Our time: 00:00:00

Welcome, Guest

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

TOPIC: Title shown also before animation

Title shown also before animation 6 years, 8 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 6 years, 8 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 6 years, 8 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 6 years, 7 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.41 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.
Happy Children's Day 2020! Up to 50% OFF Storewide

Suggested Posts

(/)
Result not found!

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
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes