I'm working with the slick slider. And I have two images: prev.png and next.png, but it won't work. I tried various other things, but its not working.
And I have this error message in the Web Inspector Console:
jquery.min.js:2 GET file:///C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/lightbox/img/next.png net::ERR_FILE_NOT_FOUND
This the result and the arrow is just > in .slick-next:before. I will remove it after its okay.
Image Arrow
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev
{
left: 30px;
width:71px;
height:43px;
z-index: 100;
background: url(common/js/lightbox/img/prev.png) no-repeat center;
background-size:71px 45px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '<';
}
[dir='rtl'] .slick-prev:before
{
content: '>';
}
.slick-next
{
right: 30px;
width:71px;
height:45px;
z-index: 100;
background: url(common/js/lightbox/img/next.png) no-repeat center;
background-size:71px 45px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '>';
}
[dir='rtl'] .slick-next:before
{
content: '<';
}
I assume it that my file slick-theme.css is with the index.html .So I use common/js/lightbox/img/prev.png
But when I observe my folder the path is like this
So I tried to get the image outside the css folder and use this background: url(../img/next.png);
Related
The below code makes the before content flow outside the button itself. what should I do to contain it within the button
I need a parameter that fits the before content inside the button itself........................................................................................................................................................................
===================================================
button {
padding: 0.9em 2em;
border: 2px solid #17C3B2;
position: absolute;
background-color: transparent;
text-align: center;
text-transform: uppercase;
font-size: 16px;
color: #ddd;
transition: .3s;
display: block;
font-family: inherit;
color: #17C3B2;
z-index: 1;
}
button::before {
overflow: hidden;
content: '';
width: 0;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
background: #17C3B2;
transition: .5s ease;
display: block;
z-index: ;
}
button span {
position: absolute;
left: 0;
top: 0;
width: 10%;
height: 10%;
background: transparent;
z-index: 1;
}
button span::before {
content: "";
display: block;
position: absolute;
width: 8%;
height: 500%;
background: var(--lightgray);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-60deg);
transition: all 0.3s;
}
button:hover::before {
position: absolute;
transform: translate(-50%, -50%) rotate(44deg);
width: 100%;
}
button:hover {
color: #111;
}
<button>hover me
<span></span>
</button>
i have added overflow: hidden; to the button and z-index: -1; to button:hover::before
button {
padding: 0.9em 2em;
border: 2px solid #17C3B2;
position: absolute;
background-color: transparent;
text-align: center;
text-transform: uppercase;
font-size: 16px;
color: #ddd;
transition: .3s;
display: block;
font-family: inherit;
color: #17C3B2;
z-index: 1;
overflow: hidden;
}
button::before {
overflow: hidden;
content: '';
width: 0;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
background: #17C3B2;
transition: .5s ease;
display: block;
z-index: ;
}
button span {
position: absolute;
left: 0;
top: 0;
width: 10%;
height: 10%;
background: transparent;
z-index: 1;
}
button span::before {
content: "";
display: block;
position: absolute;
width: 8%;
height: 500%;
background: var(--lightgray);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-60deg);
transition: all 0.3s;
}
button:hover::before {
position: absolute;
transform: translate(-50%, -50%) rotate(44deg);
width: 100%;
z-index: -1;
}
button:hover {
color: #111;
}
<button>hover me
<span></span>
</button>
I've got the following CSS and HTML. The problem is, that when the mouse is moved over the button, the red rectangle flashes to the center instead of smoothly moving to the center. It is strange because when the mouse is moved away from the button, it moves back slowly. How can I make the red rectangle move to the center smooth?
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
bottom: -10px;
right: -10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
For some reason, it didn't work with bottom: -10px and right: -10px. I'm not sure if this has to do with my code or if this is a browser problem, but the easy fix is to use the top and left properties instead:
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
top: 10px;
left: 10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
.red-translucent {
background-color: red;
top: 10px;
left: 10px;
}
Use transform instead of top, left, bottom, right like this:
.btn {
position: relative;
display: flex;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
transform: translate(-10px, -10px);
}
.btn .bottom-right {
transform: translate(10px, 10px);
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
transform: translate(0px, 0px);
}
This will work smoothly on either the move-in or move-out of the pointer.
I have the following html:
<div class="container">
<span class="word-container" >
<span tooltip-def="To sign or give formal approval to.">
<span class="define-word highlight-word">ratifying</span>
</span>
</span>
</div>
CSS:
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 50%;
position: absolute;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The tooltip is cut off on the left side. I tried overflow: visible and higher z-index on .word-container [tooltip-def]:after, but none of the working.
Here is the jsfiddle demo: https://jsfiddle.net/mddc/5dtwr6zc/10/
How can I make minimal CSS changes to make the tooltip visible? Move to the right side when the left side touches the browser edge?
you are going great you only need to change the css. below is the css code apply and check.
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 10%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 20%;
position: relative;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
I've made the changes which can be viewed in the fiddle below
https://jsfiddle.net/5dtwr6zc/14/
.test{
overflow: visible;
}
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 150%;
position: absolute;
transform: translateX(-47%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The problem was the positioning of the after psuedo element. But I would strongly suggest to make the positioning dynamic as per the context using JavaScript
How can I achieve this?
It's a wordpress menu.
pic
Ok, so far I have this:
ul{
display: flex;
li{
width: 100%;
a{
position: absolute;
bottom: 0;
top: 0;
width: 2%;
span{
display: block;
position:absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
};
};
};
};
and it works, but now I need some kind of a javascript, so that the headings inside the span will be centered and every element will have the same amount of space from left and right.
pic2
got it done, with adding left: %; to each menu item element.
Thanks for help!
Made it like this:
fiddle: https://jsfiddle.net/uq3vLvpb/
The html:
<ul>
<li><a><span>one</span></a></li>
<li><a><span>two</span></a></li>
<li><a><span>three</span></a></li>
<li><a><span>four</span></a></li>
<li><a><span>five</span></a></li>
<li><a><span>six</span></a></li>
<li><a><span>seven</span></a></li>
<li><a><span>eight</span></a></li>
</ul>
The css:
ul {
li {
width: 100%;
a {
position: absolute;
bottom: 0;
top: 0;
width: 10.5%;
font-family: 'Lora', serif;
font-size: 26px;
font-weight: 400;
text-align: center;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
text-decoration: none;
padding: 0 15px;
cursor: pointer;
span {
display: block;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -35%);
-webkit-transform: translate(-50%, -35%);
-moz-transform: translate(-50%, -35%);
}
&:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}
}
li:first-child {
a {
left: 9.5%;
}
}
li:nth-child(2) {
a {
left: 19.5%;
}
}
li:nth-child(3) {
a {
left: 29.6%;
}
}
li:nth-child(4) {
a {
left: 39.6%;
}
}
li:nth-child(5) {
a {
left: 49.7%;
}
}
li:nth-child(6) {
a {
left: 59.8%;
}
}
li:nth-child(7) {
a {
left: 69.9%;
}
}
li:nth-child(8) {
a {
left: 80%;
}
}
}
I have a codepen below. Basically, I'm trying to show a popup on hover of the highlighted circles (red), however some highlighted circles are showing up above some of the popups, even when the popups are always given a higher z-index all the time.
http://codepen.io/Wolfmans55/pen/jPwKqZ
This is the animation used for the popup, which I believe maybe the culprit.
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
Take out the z-index setting on .white-popup and set a higher z-index on .white-popup:hover .popup and .white:hover.
see jsfiddle
#import url(http://fonts.googleapis.com/css?family=Roboto);
body,
html {
height: 100%;
}
body {
background: #343837;
transition: opacity .25s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
overflow: hidden;
}
.show-body {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.page {
background: #343837;
font-family: 'Roboto', sans-serif;
font-size: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
}
.page-2 {
left: auto;
right: -100%;
background: blue;
}
.prev-page,
.next-page {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: red;
}
.next-page {
right: 20px;
}
.prev-page {
left: 20px;
}
.page-wrapper {
position: absolute;
top: 50%;
margin-top: -303px;
width: 100%;
}
.header_section {
text-shadow: 1px 1px 1px #000;
font-size: 2em;
}
h1 {
margin: 0;
}
.blue_title {
color: #54c8e7;
font-weight: normal;
}
.primary_title {
font-size: 4em;
margin-top: -34px;
margin-bottom: 20px;
}
.sub_title {
position: relative;
font-size: 1em;
background: #343837;
padding: 0 4px;
display: inline-block;
}
.sub_title_divider {
border-top: 1px solid #54c8e7;;
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.city-name {
font-size: 2em;
}
.emphasis {
font-weight: bold;
}
.inlineblock {
display: inline-block;
}
.centertxt {
text-align: center;
}
.pos_rel {
position: relative;
}
.overflow_hidden {
overflow: hidden;
}
.vert_mid {
vertical-align: middle;
}
table {
cursor: pointer;
margin: 0 auto;
border-spacing: 1px;
}
td {
width: 10px;
height: 10px;
border-radius: 50%;
}
.white,
.white-popup {
background: #000;
position: relative;
-webkit-animation: in .25s;
}
.white-popup {
background: red;
}
/*.plan-to {
background: #018c9e;
z-index: 2;
}*/
.white-popup .popup {
cursor: auto;
-webkit-animation: popup .25s forwards;
z-index: 10;
}
.popup {
position: absolute;
width: 100px;
height: 100px;
font-size: 5px;
overflow: hidden;
background: #54c8e7;
z-index:10;
top: -45px;
left: -45px;
padding: 8px;
border: 1px solid #343837;
border-radius: 3px;
box-sizing: border-box;
}
.white-popup:hover .popup {
-webkit-animation: out .25s forwards;
z-index: 50;
}
.white:hover {
-webkit-animation: out .25s forwards;
z-index: 50;
}
#-webkit-keyframes in {
from {background:#fff; transform: scale(1);}
to {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes out {
0% {background:#fff; transform: scale(1);}
100% {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
.key {
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 2px;
}
.key_1 {
background: #54c8e7;
}
.key_2 {
background: #018c9e;
}
.key_3 {
background: #fff;
}
.legend {
text-transform:uppercase;
font-size: 12px;
color: #fff;
margin-bottom: 30px;
}
.legend_item {
margin-left: 15px;
}
#media screen and (min-width: 768px) {
.page-wrapper {
margin-top: -388px;
}
td {
width: 15px;
height: 15px;
}
}
I added the following CSS:
td:hover {
z-index: 1;
}
And inside .white-popup selector, I removed:
z-index: 2;
line.
Seems to work for me.