Draw a ring around a circle in Progress Tracker - css

How can I draw a ring around the circle in this progress tracker like on the image ring around circle
The progress tracker is based on http://nigelotoole.github.io/progress-tracker/
Here is the example https://codepen.io/anon/pen/JewMeM
The approach was with:
.progress-step.is-active .progress-marker {
background-color: #2196F3;
border: 2px solid #0e38b1;
}
There must be an empty/white space between the ring and the circle.

You can use some pseudo elements.
Try this
.progress-step.is-active .progress-marker::after {
content: "";
position: absolute;
border: 2px solid #0e38b1;
height: 22px;
width: 22px;
background: transparent;
border-radius: 100%;
}
.progress-tracker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
list-style: none;
}
.progress-step {
display: block;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
margin: 0;
padding: 0;
min-width: 28px;
}
.progress-step:last-child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.progress-step:not(:last-child)::after {
content: '';
display: block;
position: absolute;
z-index: -10;
top: 6px;
bottom: 12px;
right: 0;
width: 100%;
height: 2px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.progress-step.is-active .progress-title {
font-weight: 400;
}
.progress-step > a {
display: block;
}
.progress-marker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 20;
width: 10px;
height: 10px;
color: #fff;
font-weight: 400;
border: 2px solid transparent;
border-radius: 50%;
-webkit-transition: background-color, border-color;
transition: background-color, border-color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.progress-text {
display: block;
padding: 14px 9.3333333333px;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-title {
margin-top: 0;
}
.progress-step .progress-marker {
color: #fff;
background-color: #0e38b1;
}
.progress-step::after {
background-color: #0e38b1;
}
.progress-step .progress-text, .progress-step .progress-step > a .progress-text {
color: #333333;
}
.progress-step.is-active .progress-marker {
background-color: #2196F3;
}
.progress-step.is-complete .progress-marker {
background-color: #1976D2;
}
.progress-step.is-complete::after {
background-color: #868686;
}
.progress-step:hover .progress-marker {
background-color: #56ADF5;
}
.progress-tracker--center .progress-step {
text-align: center;
}
.progress-tracker--center .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--center .progress-step::after {
right: -50%;
}
.progress-tracker--center .progress-marker {
margin-left: auto;
margin-right: auto;
}
.progress-tracker--right .progress-step {
text-align: right;
}
.progress-tracker--right .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--right .progress-step::after {
right: calc(-100% + 14px);
}
.progress-tracker--right .progress-marker {
margin-left: auto;
}
.progress-tracker--border {
padding: 5px;
border: 2px solid #868686;
border-radius: 38px;
}
.progress-tracker--spaced .progress-step::after {
width: calc(100% - 30px);
margin-right: 8px;
}
.progress-tracker--word {
padding-right: 38.6666666667px;
overflow: hidden;
}
.progress-tracker--word .progress-text {
display: inline-block;
white-space: nowrap;
}
.progress-tracker--word .progress-title {
margin: 0;
}
.progress-tracker--word-center {
padding-right: 38.6666666667px;
padding-left: 38.6666666667px;
}
.progress-tracker--word-center .progress-text {
padding-right: 0;
padding-left: 0;
-webkit-transform: translateX(calc(-50% + 14px));
transform: translateX(calc(-50% + 14px));
}
.progress-tracker--word-right {
padding-right: 0;
padding-left: 38.6666666667px;
}
.progress-tracker--word-right .progress-text {
padding-left: 0;
-webkit-transform: translateX(calc(-100% + 28px));
transform: translateX(calc(-100% + 28px));
}
.progress-tracker--text .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--text-top .progress-step::after {
top: auto;
}
.progress-tracker--text-top .progress-text {
height: 100%;
}
.progress-tracker--text-top .progress-marker {
bottom: 28px;
}
.progress-tracker--text-inline .progress-step {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.progress-tracker--text-inline .progress-text {
position: relative;
z-index: 30;
max-width: 70%;
white-space: nowrap;
padding-top: 0;
padding-bottom: 0;
background-color: #fff;
}
.progress-tracker--text-inline .progress-title {
margin: 0;
}
.progress-tracker--square .progress-step {
padding-top: 0;
}
.progress-tracker--square .progress-marker {
-webkit-transform: scaleX(0.33) translateY(-12px);
transform: scaleX(0.33) translateY(-12px);
border-radius: 0;
}
#media (max-width: 399px) {
.progress-tracker-mobile {
overflow-x: auto;
}
.progress-tracker-mobile .progress-tracker {
min-width: 200%;
}
}
.progress-tracker--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.progress-tracker--vertical .progress-step {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.progress-tracker--vertical .progress-step::after {
right: auto;
top: 14px;
left: 12px;
width: 4px;
height: 100%;
}
.progress-tracker--vertical .progress-marker {
position: absolute;
left: 0;
}
.progress-tracker--vertical .progress-text {
padding-top: 7px;
padding-left: 42px;
}
.progress-tracker--vertical .progress-step:not(:last-child) .progress-text {
padding-bottom: 42px;
}
#-webkit-keyframes scale-up {
from {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
to {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
#keyframes scale-up {
from {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
to {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
.anim-ripple .progress-marker::before, .anim-ripple-large .progress-marker::before, .anim-ripple-splash .progress-marker::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
}
.anim-ripple :not(:active) .progress-marker::before, .anim-ripple-large :not(:active) .progress-marker::before, .anim-ripple-splash :not(:active) .progress-marker::before {
-webkit-animation: scale-up 0.3s ease-out;
animation: scale-up 0.3s ease-out;
}
.anim-ripple :focus .progress-marker::before, .anim-ripple-large :focus .progress-marker::before, .anim-ripple-splash :focus .progress-marker::before {
visibility: visible;
}
.anim-ripple-large .progress-marker::before {
width: 200%;
height: 200%;
}
.anim-ripple-splash .progress-marker::before {
width: 200%;
height: 200%;
box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.35);
}
.anim-ripple-double .progress-marker::before, .anim-ripple-double .progress-marker::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
background: none;
border: 3px solid rgba(0, 0, 0, 0.3);
}
.anim-ripple-double :not(:active) .progress-marker::before, .anim-ripple-double :not(:active) .progress-marker::after {
-webkit-animation: scale-up 0.3s ease-out 0s;
animation: scale-up 0.3s ease-out 0s;
}
.anim-ripple-double :not(:active) .progress-marker::after {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.anim-ripple-double :focus .progress-marker::before, .anim-ripple-double :focus .progress-marker::after {
visibility: visible;
}
.anim-path .progress-step::after {
background-image: -webkit-linear-gradient(left, #0e38b1 50%, #868686 50%);
background-image: linear-gradient(to right, #0e38b1 50%, #868686 50%);
background-size: 200% 100%;
background-position: 0% 100%;
-webkit-transition: background-position 0.3s ease-out;
transition: background-position 0.3s ease-out;
}
.anim-path .progress-step.is-complete::after {
background-position: -100% 100%;
}
.progress-step.is-active .progress-marker::after {
content: "";
position: absolute;
border: 2px solid #0e38b1;
height: 22px;
width: 22px;
background: transparent;
border-radius: 100%;
}
<ul class="progress-tracker progress-tracker--spaced">
<li class="progress-step is-active">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
</ul>
Updated pen: https://codepen.io/anon/pen/VVqQRw

If you are not willing to change the HTML structure of your progress tracket, the easiest way would be with a box-shadow IMO, like so :
box-shadow: 0 0 0 10px #FFF, 0 0 0 11px #000
The first box-shadow is going to be the color of the background (here set to 10px) and the second one is going to be the color of your border (here set to 11px so that it shows a 1px border). To change your border width or size simply adjust those two values.
Hope this helps !

I hope this works for you
<div class="cr1">
<div class="cr2">
</div>
</div>
.cr1{
border: 10px solid #bababa;
width: 232px;
border-radius: 50%;
}
.cr2{
background: #bababa;
width: 150px;
height: 150px;
border-radius: 56%;
display: inline-block;
border: 41px solid #fff;
}

Adding a box shadow will do the trick.
Change .progress-step.is-active .progress-marker to,
.progress-step.is-active .progress-marker {
background-color: #2196F3;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #2196F3;
margin-top: -1px
}
Here's a working example: https://codepen.io/paddyfields/pen/GwPQPo

You can add border with :before selector
.progress-step.is-active .progress-marker:before {
content: "";
border: 2px solid #2196F3;
width: 20px;
height: 20px;
position: absolute;
border-radius: 100%
}
.progress-tracker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
list-style: none;
}
.progress-step {
display: block;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
margin: 0;
padding: 0;
min-width: 28px;
}
.progress-step:last-child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.progress-step:not(:last-child)::after {
content: '';
display: block;
position: absolute;
z-index: -10;
top: 6px;
bottom: 12px;
right: 0;
width: 100%;
height: 2px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.progress-step.is-active .progress-title {
font-weight: 400;
}
.progress-step.is-active .progress-marker:before {
content: "";
border: 2px solid #2196F3;
width: 20px;
height: 20px;
position: absolute;
border-radius: 100%
}
.progress-step > a {
display: block;
}
.progress-marker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 20;
width: 10px;
height: 10px;
color: #fff;
font-weight: 400;
border: 2px solid transparent;
border-radius: 50%;
-webkit-transition: background-color, border-color;
transition: background-color, border-color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.progress-text {
display: block;
padding: 14px 9.3333333333px;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-title {
margin-top: 0;
}
.progress-step .progress-marker {
color: #fff;
background-color: #0e38b1;
}
.progress-step::after {
background-color: #0e38b1;
}
.progress-step .progress-text, .progress-step .progress-step > a .progress-text {
color: #333333;
}
.progress-step.is-active .progress-marker {
background-color: #2196F3;
}
.progress-step.is-complete .progress-marker {
background-color: #1976D2;
}
.progress-step.is-complete::after {
background-color: #868686;
}
.progress-step:hover .progress-marker {
background-color: #56ADF5;
}
.progress-tracker--center .progress-step {
text-align: center;
}
.progress-tracker--center .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--center .progress-step::after {
right: -50%;
}
.progress-tracker--center .progress-marker {
margin-left: auto;
margin-right: auto;
}
.progress-tracker--right .progress-step {
text-align: right;
}
.progress-tracker--right .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--right .progress-step::after {
right: calc(-100% + 14px);
}
.progress-tracker--right .progress-marker {
margin-left: auto;
}
.progress-tracker--border {
padding: 5px;
border: 2px solid #868686;
border-radius: 38px;
}
.progress-tracker--spaced .progress-step::after {
width: calc(100% - 30px);
margin-right: 8px;
}
.progress-tracker--word {
padding-right: 38.6666666667px;
overflow: hidden;
}
.progress-tracker--word .progress-text {
display: inline-block;
white-space: nowrap;
}
.progress-tracker--word .progress-title {
margin: 0;
}
.progress-tracker--word-center {
padding-right: 38.6666666667px;
padding-left: 38.6666666667px;
}
.progress-tracker--word-center .progress-text {
padding-right: 0;
padding-left: 0;
-webkit-transform: translateX(calc(-50% + 14px));
transform: translateX(calc(-50% + 14px));
}
.progress-tracker--word-right {
padding-right: 0;
padding-left: 38.6666666667px;
}
.progress-tracker--word-right .progress-text {
padding-left: 0;
-webkit-transform: translateX(calc(-100% + 28px));
transform: translateX(calc(-100% + 28px));
}
.progress-tracker--text .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--text-top .progress-step::after {
top: auto;
}
.progress-tracker--text-top .progress-text {
height: 100%;
}
.progress-tracker--text-top .progress-marker {
bottom: 28px;
}
.progress-tracker--text-inline .progress-step {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.progress-tracker--text-inline .progress-text {
position: relative;
z-index: 30;
max-width: 70%;
white-space: nowrap;
padding-top: 0;
padding-bottom: 0;
background-color: #fff;
}
.progress-tracker--text-inline .progress-title {
margin: 0;
}
.progress-tracker--square .progress-step {
padding-top: 0;
}
.progress-tracker--square .progress-marker {
-webkit-transform: scaleX(0.33) translateY(-12px);
transform: scaleX(0.33) translateY(-12px);
border-radius: 0;
}
#media (max-width: 399px) {
.progress-tracker-mobile {
overflow-x: auto;
}
.progress-tracker-mobile .progress-tracker {
min-width: 200%;
}
}
.progress-tracker--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.progress-tracker--vertical .progress-step {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.progress-tracker--vertical .progress-step::after {
right: auto;
top: 14px;
left: 12px;
width: 4px;
height: 100%;
}
.progress-tracker--vertical .progress-marker {
position: absolute;
left: 0;
}
.progress-tracker--vertical .progress-text {
padding-top: 7px;
padding-left: 42px;
}
.progress-tracker--vertical .progress-step:not(:last-child) .progress-text {
padding-bottom: 42px;
}
#-webkit-keyframes scale-up {
from {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
to {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
#keyframes scale-up {
from {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
to {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
.anim-ripple .progress-marker::before, .anim-ripple-large .progress-marker::before, .anim-ripple-splash .progress-marker::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
}
.anim-ripple :not(:active) .progress-marker::before, .anim-ripple-large :not(:active) .progress-marker::before, .anim-ripple-splash :not(:active) .progress-marker::before {
-webkit-animation: scale-up 0.3s ease-out;
animation: scale-up 0.3s ease-out;
}
.anim-ripple :focus .progress-marker::before, .anim-ripple-large :focus .progress-marker::before, .anim-ripple-splash :focus .progress-marker::before {
visibility: visible;
}
.anim-ripple-large .progress-marker::before {
width: 200%;
height: 200%;
}
.anim-ripple-splash .progress-marker::before {
width: 200%;
height: 200%;
box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.35);
}
.anim-ripple-double .progress-marker::before, .anim-ripple-double .progress-marker::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
background: none;
border: 3px solid rgba(0, 0, 0, 0.3);
}
.anim-ripple-double :not(:active) .progress-marker::before, .anim-ripple-double :not(:active) .progress-marker::after {
-webkit-animation: scale-up 0.3s ease-out 0s;
animation: scale-up 0.3s ease-out 0s;
}
.anim-ripple-double :not(:active) .progress-marker::after {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.anim-ripple-double :focus .progress-marker::before, .anim-ripple-double :focus .progress-marker::after {
visibility: visible;
}
.anim-path .progress-step::after {
background-image: -webkit-linear-gradient(left, #0e38b1 50%, #868686 50%);
background-image: linear-gradient(to right, #0e38b1 50%, #868686 50%);
background-size: 200% 100%;
background-position: 0% 100%;
-webkit-transition: background-position 0.3s ease-out;
transition: background-position 0.3s ease-out;
}
.anim-path .progress-step.is-complete::after {
background-position: -100% 100%;
}
<ul class="progress-tracker progress-tracker--spaced">
<li class="progress-step is-active">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
</ul>

Related

Setting A Hamburger Menu So That It Stretches Across The Entire Screen

Below is the code that I've used to create a responsive hamburger menu. I'd like to set the hamburger menu so that when opened it stretches (and is displayed) across the entire screen. I imagine that this would involve editing the CSS, which I have unsuccessfully tried doing.
If anyone has any ideas on how I could have the hamburger menu displayed across the entire screen, I'd appreciate you sharing your knowledge with me. Thank you.
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden">
<li style="border-bottom: 1px solid lightgray">Home</li>
<li style="border-bottom: 1px solid lightgray">Blog</li>
<li style="border-bottom: 1px solid lightgray">About This Website</li>
<li style="border-bottom: 1px solid lightgray">Bibliography</li>
</ul>
</nav>
</header>
</div>
It's just a matter of adjusting the menu width and the translation dimension to match. Look into how you can use your browser's document inspector to find styles relevant to your goals.
FYI, you don't need vendor prefixes for transform or transition.
/* Scroll down... */
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -100vw; /* <------------------------------------------------ HERE */
overflow-y: hidden;
width: 100vw; /* <------------------------------------------------ HERE */
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>

how to make owl carousel appear in all the pages of the blog

im really new at this but made owl carousel appear at the main page of my blog just the way i like it.
the thing is, now i want it to appear the same way in all the pages of the blog. is there a way i can make the call in the pages or anything i can add to the theme or main page so it can show it in all the articles?
i have it in the html of the theme like this
* ######## Top Feature Css ######################### */
.recent-boxes .carousel {
position: relative;
margin: 0 0 0!important;
padding: 0;
overflow: visible;
height: auto;
display: block;
clear: both
}
.owl-carousel .animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
#keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out
}
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0px, 0px, 0px)
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel .owl-refresh .owl-item {
display: none
}
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
-webkit-transform-style: preserve-3d
}
.owl-carousel.owl-text-select-on .owl-item {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto
}
.owl-carousel .owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.no-js .owl-carousel {
display: block
}
.owl-prev,
.owl-next {
top: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.75);
font-family: FontAwesome;
position: absolute;
z-index: 1;
display: block;
padding: 0;
cursor: pointer;
padding: 0;
text-align: center;
overflow: hidden
}
.owl-prev {
left: 0
}
.owl-prev:before {
content: "\f104"
}
.owl-next {
right: 0
}
.owl-next:before {
content: "\f105"
}
.owl-prev:hover,
.owl-next:hover {
background-color: #000
}
.owl-dots {
position: absolute;
bottom: 1px;
width: 33.33%;
left: 0;
right: 0;
margin: auto;
text-align: center
}
.owl-dot {
background: #fff;
height: 3px;
width: 10px;
display: inline-block;
margin: 0 5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
opacity: .6
}
.owl-dot.active,
.owl-dot:hover {
background: #e74c3c
}
.main-carousel {
height: 350px;
overflow: hidden
}
.main-carousel .owl-item {
width: 100%;
}
.carousel-item {
height: 350px;
width: 100%;
position: relative;
padding: 0!important;
display: block;
overflow: hidden
}
.carousel-item .box-image {
height: 350px;
position: relative;
width: 100%;
display: block
}
.carousel-item .box-image:after {
content: no-close-quote;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 151px;
background: url(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/s1600-r/metabg.png) repeat-x;
opacity: .8
}
.carousel-content {
position: absolute;
bottom: 0;
width: 100%;
z-index: 2;
box-sizing: border-box
}
.carousel-item .carousel-content {
padding: 15px;
text-align: center;
}
.carousel-item .recent-title {
margin: 10px 0 5px;
font-size: 19px;
font-weight: 400
}
.carousel-item .recent-title a {
color: #fff;
display: block;
line-height: 1.4em;
text-shadow: 0 .5px .5px rgba(34, 34, 34, 0.3)
}
.carousel-item .recent-author {
color: #fff;
}
.carousel-item .recent-date {
visibility: hidden;
display: none;
}
.carousel-tag a {
display: inline-block;
background-color: #e74c3c;
color: #fff;
height: 20px;
line-height: 20px;
padding: 0 6px;
font-size: 11px;
text-transform: uppercase;
border-radius: 2px
}
.carousel-tag a:before {
content: "\f091";
font-family: FontAwesome;
font-weight: 400;
font-style: normal;
line-height: 1;
padding-right: 4px;
}
.recent-author::before {
content: '\f007';
font-family: fontawesome;
color: #bbb;
margin-right: 5px;
}
.recent-author {
margin-right: 10px;
}
.carousel-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40, 35, 40, 0.05)
}
.main-carousel .owl-item:hover .carousel-overlay {
background-color: $mainbgcolor;
opacity:0.5;
}
.carousel-overlay:before {
z-index: 3;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.carousel-overlay:after {
z-index: 3;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
.carousel-overlay:before, .carousel-overlay:after {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
.main-carousel .owl-item:hover .carousel-overlay:before, .main-carousel .owl-item:hover .carousel-overlay:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.main-carousel .owl-prev,
.main-carousel .owl-next {
margin-top: 0px;
width: 40px;
height: 40px;
font-size: 25px;
line-height: 40px
}
.main-carousel .owl-prev {
left: -50px
}
.main-carousel:hover .owl-prev {
left: 0
}
.main-carousel .owl-next {
right: -50px
}
.main-carousel:hover .owl-next {
right: 0
}
.main-carousel .owl-dots {
bottom: 10px
}

CSS: How can I separate this CSS snippet?

I've found a code snippet but I can't separate it. The problem is that my page can't understand this type of css so is there a way to separate it into normal CSS without the & etc.?
.f-modal-alert .f-modal-icon {
border-radius: 50%;
border: 4px solid gray;
box-sizing: content-box;
height: 80px;
margin: 20px auto;
padding: 0;
position: relative;
width: 80px;
// Success icon
&.f-modal-success,
&.f-modal-error {
border-color: #004;
&:after,
&:before {
background: #fff;
content: '';
height: 120px;
position: absolute;
transform: rotate(45deg);
width: 60px;
}
&:before {
border-radius: 120px 0 0 120px;
left: -33px;
top: -7px;
transform-origin: 60px 60px;
transform: rotate(-45deg);
}
&:after {
border-radius: 0 120px 120px 0;
left: 30px;
top: -11px;
transform-origin: 0 60px;
transform: rotate(-45deg);
}
.f-modal-placeholder {
border-radius: 50%;
border: 4px solid rgba(0, 222, 180, .5);
box-sizing: content-box;
height: 80px;
left: -4px;
position: absolute;
top: -4px;
width: 80px;
z-index: 2;
}
.f-modal-fix {
background-color: #fff;
height: 90px;
left: 28px;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 5px;
z-index: 1;
}
.f-modal-line {
background-color: #00deb4;
border-radius: 2px;
display: block;
height: 5px;
position: absolute;
z-index: 2;
&.f-modal-tip {
left: 14px;
top: 46px;
transform: rotate(45deg);
width: 25px;
}
&.f-modal-long {
right: 8px;
top: 38px;
transform: rotate(-45deg);
width: 47px;
}
}
}
// Error icon
&.f-modal-error {
border-color: #abc;
.f-modal-x-mark {
display: block;
position: relative;
z-index: 2;
}
.f-modal-placeholder {
border: 4px solid rgba(170, 0, 0, .5);
}
.f-modal-line {
background-color: #aa0000;
top: 37px;
width: 47px;
&.f-modal-left {
left: 17px;
transform: rotate(45deg);
}
&.f-modal-right {
right: 16px;
transform: rotate(-45deg);
}
}
}
}
.animateSuccessTip {
animation: animateSuccessTip .75s;
}
.animateSuccessLong {
animation: animateSuccessLong .75s;
}
.f-modal-icon.f-modal-success.animate:after {
animation: rotatePlaceholder 4.25s ease-in;
}
.f-modal-icon.f-modal-error.animate:after {
animation: rotatePlaceholder 4.25s ease-in;
}
.animateErrorIcon {
animation: animateErrorIcon .5s;
}
.animateXLeft {
animation: animateXLeft .75s;
}
.animateXRight {
animation: animateXRight .75s;
}
It's written in Sass/Scss, a CSS preprocessor. It is a scripting language that extends CSS. Sass/Scss must be compiled into CSS, for the browser to understand it.
To convert it into CSS, you should have a proper Sass/Scss compiler, watching your changes, and compiling your Sass/Scss into CSS on the fly. Or you can run it manually in an online Sass/Scss to CSS converter, like this one: https://www.cssportal.com/scss-to-css/
So you would get a normal CSS:
.f-modal-alert .f-modal-icon {
border-radius: 50%;
border: 4px solid gray;
box-sizing: content-box;
height: 80px;
margin: 20px auto;
padding: 0;
position: relative;
width: 80px;
}
.f-modal-alert .f-modal-icon.f-modal-success, .f-modal-alert .f-modal-icon.f-modal-error {
border-color: #004;
}
.f-modal-alert .f-modal-icon.f-modal-success:after, .f-modal-alert .f-modal-icon.f-modal-error:after, .f-modal-alert .f-modal-icon.f-modal-success:before, .f-modal-alert .f-modal-icon.f-modal-error:before {
background: #fff;
content: '';
height: 120px;
position: absolute;
transform: rotate(45deg);
width: 60px;
}
.f-modal-alert .f-modal-icon.f-modal-success:before, .f-modal-alert .f-modal-icon.f-modal-error:before {
border-radius: 120px 0 0 120px;
left: -33px;
top: -7px;
transform-origin: 60px 60px;
transform: rotate(-45deg);
}
.f-modal-alert .f-modal-icon.f-modal-success:after, .f-modal-alert .f-modal-icon.f-modal-error:after {
border-radius: 0 120px 120px 0;
left: 30px;
top: -11px;
transform-origin: 0 60px;
transform: rotate(-45deg);
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-placeholder, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder {
border-radius: 50%;
border: 4px solid rgba(0, 222, 180, .5);
box-sizing: content-box;
height: 80px;
left: -4px;
position: absolute;
top: -4px;
width: 80px;
z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-fix, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-fix {
background-color: #fff;
height: 90px;
left: 28px;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 5px;
z-index: 1;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line {
background-color: #00deb4;
border-radius: 2px;
display: block;
height: 5px;
position: absolute;
z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-tip, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-tip {
left: 14px;
top: 46px;
transform: rotate(45deg);
width: 25px;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-long, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-long {
right: 8px;
top: 38px;
transform: rotate(-45deg);
width: 47px;
}
.f-modal-alert .f-modal-icon.f-modal-error {
border-color: #abc;
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-x-mark {
display: block;
position: relative;
z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder {
border: 4px solid rgba(170, 0, 0, .5);
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line {
background-color: #a00;
top: 37px;
width: 47px;
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-left {
left: 17px;
transform: rotate(45deg);
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-right {
right: 16px;
transform: rotate(-45deg);
}
.animateSuccessTip {
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
animation: animateSuccessLong 0.75s;
}
.f-modal-icon.f-modal-success.animate:after {
animation: rotatePlaceholder 4.25s ease-in;
}
.f-modal-icon.f-modal-error.animate:after {
animation: rotatePlaceholder 4.25s ease-in;
}
.animateErrorIcon {
animation: animateErrorIcon 0.5s;
}
.animateXLeft {
animation: animateXLeft 0.75s;
}
.animateXRight {
animation: animateXRight 0.75s;
}

Unintentional delay when hover off

When I hover-on the transition starts immediately, but it waits for maybe 300ms before starting the reverse transition when I hover-off. (https://jsfiddle.net/vawpnrL9/1/)
<div id="isa-hover-gallery">
<a href="https://febc.org/indonesia">
<div class="isa-image" style="background-image:url('https://febc2017.wpengine.com/wp-content/plugins/justified-image-grid/timthumb.php?src=https%3A%2F%2Ffebc2017.wpengine.com%2Fwp-content%2Fuploads%2FEmail-1-Pakistan-Listener-Story_banner-image-900x600.jpg&h=560&w=798&q=45&f=.jpg')">
<div class="slide-text">
<p><b>Sharing His Faith in Pakistan</b></p>
<p>Anam* was given an extraordinary opportunity after he came to faith in Christ…He was asked to preach from the Bible in the mosque his father ran…</p>
</div>
</div>
</a>
</div>
#isa-hover-gallery {
display: flex;
flex-wrap: wrap;
}
#isa-hover-gallery .isa-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 215px;
min-width: 320px;
margin: 0 24px 24px 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#isa-hover-gallery .isa-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0);
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image > span {
position: relative;
z-index: 11;
opacity: 0;
color: #ffffff;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image .slide-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 4px 6px;
background-color: rgba(0,0,0,0.8);
color: #ffffff;
z-index: 11;
}
#isa-hover-gallery .isa-image .slide-text p:first-child {
padding-bottom: 0;
}
#isa-hover-gallery .isa-image .slide-text p:last-child {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: 600ms ease-in;
}
#isa-hover-gallery .isa-image:hover::after {
background-color: rgba(0,0,0,0.6);
}
#isa-hover-gallery .isa-image:hover > span {
opacity: 1;
}
#isa-hover-gallery .isa-image:hover .slide-text p:last-child {
max-height: 1000px;
margin: auto;
padding: auto;
}
I have tried different transition speeds and disabling transitions on other elements and nothing helped.
This is because you are animating max-height and you put a big value to it so you can control this by reducing the max-height to lower value:
#isa-hover-gallery {
display: flex;
flex-wrap: wrap;
}
#isa-hover-gallery .isa-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 215px;
min-width: 320px;
margin: 0 24px 24px 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#isa-hover-gallery .isa-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image>span {
position: relative;
z-index: 11;
opacity: 0;
color: #ffffff;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image .slide-text {
position: absolute;
bottom: 0;
left: 0;
right:0;
padding: 4px 6px;
background-color: rgba(0, 0, 0, 0.8);
color: #ffffff;
z-index: 11;
}
#isa-hover-gallery .isa-image .slide-text p:first-child {
padding-bottom: 0;
}
#isa-hover-gallery .isa-image .slide-text p:last-child {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: 600ms ease-in;
}
#isa-hover-gallery .isa-image:hover::after {
background-color: rgba(0, 0, 0, 0.6);
}
#isa-hover-gallery .isa-image:hover>span {
opacity: 1;
}
#isa-hover-gallery .isa-image:hover .slide-text p:last-child {
max-height: 100px;
margin: auto;
padding: auto;
}
<div id="isa-hover-gallery">
<a href="https://febc.org/indonesia">
<div class="isa-image" style="background-image:url('https://febc2017.wpengine.com/wp-content/plugins/justified-image-grid/timthumb.php?src=https%3A%2F%2Ffebc2017.wpengine.com%2Fwp-content%2Fuploads%2FEmail-1-Pakistan-Listener-Story_banner-image-900x600.jpg&h=560&w=798&q=45&f=.jpg')">
<div class="slide-text">
<p><b>Sharing His Faith in Pakistan</b></p>
<p>Anam* was given an extraordinary opportunity after he came to faith in Christ…He was asked to preach from the Bible in the mosque his father ran…</p>
</div>
</div>
</a>
</div>

Z-index issue using transform scale

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.

Resources