I have implemented the nivo slider (with default theme) successfully except for one issue.
The left arrow on the slider is showing a small part of the right arrow. The right arrow on the other hand is being displayed correctly.
How come the left side of the sprite is not rendered properly but the right one is?
Arrow picture
The only place where the arrow.png picture is declared is in the next css section:
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../Images/slider/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
Thanks.
If you look right below that class in the nivo-slider css you will notice some classes called a.nivo-nextNav and a.nivo-prevNav which are applying a background position.
The left property on a.nivo-prevNav must be wrong for the distribution of the plugin you have. If you adjust that to say 11px (you will have to play with it, to get it just right) it will fix your problem.
Related
thanks for checking out my question.
All I am trying to do is this, Have a slide enter from the left side and exit to the left side.
I am building a site on WP and no amount of plugins or hand-code seems to be able to solve this.
I have a few digital composites for my slides that I have attached below, All I want them to do is slide in from the left side of the screen, and exit to the left side of the screen individually.
Thanks for reading, hope the image below works so you can see what I am trying to accomplish, working on WP and Elementor. No widget, 3rd party plugin seems to have what I would consider a standard feature, the ability to set entrance and exit direction.
https://ibb.co/k8XCrqq
Graphic illustration of slider
Here is an example of what you can do. You can use CSS transition to do that. Here is an example of a left sidebar. When you click the sidebar, the sidebar will slide to the left.
$(".page-sidebar").on("click",function(){
$(this).addClass("sidebar-close");
});
.page-sidebar{
width: 260px;
position: fixed;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
background: #161931;
}
.page-sidebar.sidebar-close{
left:-260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-sidebar">
</div>
I'm not super super great with html but I've been able to make my way into some coding and so far, this is the only issue I can't understand nor fix.
I have one big image but under the image are text boxes, links, and other images. I can get the image to where if I hover my mouse over it, I can see the stuff under it perfectly, but I can't scroll textboxes nor can I click my links.
I tried setting the z-index to -9 but which works...if I keep my mouse still. (Pointless.) If i move my mouse, the image flickers with ever movement. Any fixes? Here is the issue. I apologize for the messy code.
#aesth {
position:fixed;
top:150px;
left:90px;
width:432px;
height:600px;
background: url('https://38.media.tumblr.com/5f5348ef9ed5ca32ffb42a153032b6d3/tumblr_n83taak4Bj1tvcp5qo1_500.png'), #fff;
z-index:9;
}
#aesth:hover {
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
The hover problem was faced due to the z-index=-9 given in the
#aesth:hover {
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
Just Remove the z-index inside the #aesth:hover it work fine
The problem there is that when you hover the image, it fades and goes behind. When it goes behind, it comes back to the initial state because it is not hovered this time but the other content.
Trying targeting the parent on hover then apply the effect to the image. This way the hover effect remains because the target is not moved away from the mouse pointer.
parent:hover > #aesth{
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
Ok guys, I have this in the style.css of my website.
.asia{
margin-left:40px;
background-image:url('../resources/img/asia.jpg');
width:100px;
height:75px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.asia:hover{
background-image:url('../resources/img/asia2.png');
width:100px;
height:75px;
}
these are two images, that I will use on my homepage by putting
<div class="asia"></div>
and everything is set for them to show up like an animation when hovering over.
The only problem is that on the laptop everything works fine, the index.html shows me all the images and the hover efect works well but when uploading and testing it on the server the images do not show up.
What is the problem? What am I doing wrong?
Could I make a suggestion, instead of having two files, perhaps combine them into one image.
Then, on hover you can update the background-position. This way, your document won't need to request another file from the server (good for people on mobile, and conserving downloads) as well as preventing a 'flicker' while the page hangs without its file and loads it in. Here's an example of the implementation.
.imageContainer {
background: url('../resources/img/asiacombined.jpg') no-repeat 0 0;
}
Let's assume the image is 100px tall.
.imageContainer:hover {
background-position: 50px /*x axis, shifting to the top of the next image in the file*/ 0 /* Y axis */;
}
Hopefully this helps.
Ps.
You can also use top, left, right, center, bottom to align content.
Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}
I would like to animate an <a> tag so when in :active state it will move to the right and when going back to regular state it would animate back to the left.
Currently it is animating on click but when I leave the mouse button it jumps back with no animation, how can I reverse the animation?
Here is a simple example, please note that i have to use position:relative;left:20px since in the real app this code is inside an absolutely positioned element and for some reason, using margin causing unexpected behaviour.
Just use left: 0; for a and use position: relative; in a rather than a:active
Demo
CSS
a {
display: block;
background: red;
-webkit-transition: left .2s ease-in,margin .2s ease-in;
-moz-transition: left .2s ease-in,margin .2s ease-in;
transition: left .2s ease-in,margin .2s ease-in;
left: 0;
position: relative;
}
Just a suggestion, moving links on click will annoy the visitors, why not use it on hover
Demo
If your live code is like the example, you just need to put position:relative; and left: 0px; on the a {} rule too.
What is happening is when you stop hovering/release click, it loses the position: relative, because it isn't on the current class. Without the position rule, the left rule is ignored.