Hi! I’m working over “Carousel Widget” customization, and it is almost ready but I’ve got little problem.
I’ve made text under the image invisible, and it shows up when post’s picture is under cursor.
It works good, except when moving cursor from bottom to the top, picture’s zoom effect is not working and
<span class="overlay"></span>is still hidden. Only text’s shows up.
.
I got several questions:
What code is responsible for zoom effect in that widget? I’ve tried to check post-carousel/css/style.css , and couldn’t find that.
I also tried to fix the problem with the way like that:
.entry-content .panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item:hover h3 a > .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a span.overlay {
opacity: 1;
}Full css:
/* ====== << CAROUSEL ====== */
.sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a {
width: 240px !important;
border: 1px solid #0896fe;
-moz-border-radius: 5px 25px;
-webkit-border-radius: 5px 25px;
-khtml-border-radius: 5px 25px;
border-radius: 5px 25px;
}
.sow-carousel-wrapper ul.sow-carousel-items {
height: 164px;
}
.sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item {
position: relative;
}
.entry-content .panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 a {
opacity: 0;
display: table;
position: absolute;
bottom: -55px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
overflow: hidden;
background: #006ca3;
background: #006ca3;
width: 99%;
color: #ffffff !important;
font-size: 14px;
font-weight: bold !important;
padding: 8px 10px;
vertical-align: middle;
max-height: 100%;
}
.entry-content .panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item:hover > h3 a {
opacity: 1;
display: table;
position: absolute;
bottom: 10px;
}
.entry-content .panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a span.overlay {
background: url(./lay_hover.png) repeat;
}
.sow-carousel-title a.sow-carousel-next, .sow-carousel-title a.sow-carousel-previous {
background: #006ca3;
background: #006ca3;
line-height: 30px;
width: 30px;
}
/* ====== CAROUSEL >> ====== */Examples:
Correct: xttp://i89.fastpic.ru/big/2017/0115/01/b9eee98993139dd01c151a39967fa501.png
Incorrect: xttp://i89.fastpic.ru/big/2017/0115/b5/aca8aa51bb647229f9adf32189cc85b5.png
Will happy to get any ideas / suggestions.
Thank you!
Hi Timofei.
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
What are you using to hide the Post Title? I would suggest using the following CSS as it won’t cause you issues with the overlay:
.sow-carousel-item h3 { display: none !important; }This code sets up the effect (Specifically the transition property):
.entry-content .panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 a { opacity: 0; display: table; position: absolute; bottom: -55px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; overflow: hidden; background: #006ca3; background: #006ca3; width: 99%; color: #ffffff !important; font-size: 14px; font-weight: bold !important; padding: 8px 10px; vertical-align: middle; max-height: 100%; }This code is the sizing the zoom:
.sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a:hover { background-size: 272px 182px; }Unfortunately, I’m unable to view fastpic.ru for some reason. Can you please try uploading the images to vgy.me or imgur.com? Sorry about this!
By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Page: Dashboard. Please reference this thread and include your SiteOrigin order key in the email.
Hi, Alex!
Yes, I had the problem with overlaying. Finally I chose not to hide text, and use zoom effect on hover. Just because it looks more good in my template ).
Thank you so much for the solution!
This code is working for me:
.sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item:hover > .sow-carousel-thumbnail a { background-size: 272px 182px; }Problem solved.