I am trying to edit this free template but im stuck with banner. I need to edit banner so that only image remains and not this red transparent background over it.
Here is the link to the template: http://app-radetic.com/ivanj_t/index.html
and this is css file. I can't find out where in banner section I can change it.
/* Banner */
#banner {
-ms-flex-align: center;
-ms-flex-pack: center;
background-color: #111111;
color: rgba(255, 255, 255, 0.5);
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
background-image: url("../../images/banner.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-top: 0;
display: -ms-flexbox;
height: 35rem !important;
min-height: 35rem;
overflow: hidden;
position: relative;
text-align: center;
width: 100%; }
#banner input, #banner select, #banner textarea {
color: #ffffff; }
#banner a {
color: #ce1b28; }
#banner strong, #banner b {
color: #ffffff; }
#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
color: #ffffff; }
#banner blockquote {
border-left-color: rgba(255, 255, 255, 0.25); }
#banner code {
background: rgba(255, 255, 255, 0.075);
border-color: rgba(255, 255, 255, 0.25); }
#banner hr {
border-bottom-color: rgba(255, 255, 255, 0.25); }
#banner input[type="submit"],
#banner input[type="reset"],
#banner input[type="button"],
#banner button,
#banner .button {
background-color: transparent;
box-shadow: inset 0 0 0 1px #ffffff;
color: #ffffff !important; }
#banner input[type="submit"]:hover,
#banner input[type="reset"]:hover,
#banner input[type="button"]:hover,
#banner button:hover,
#banner .button:hover {
/box-shadow: inset 0 0 0 1px #ce1b28;
color: #ce1b28 !important; }
#banner input[type="submit"]:hover:active,
#banner input[type="reset"]:hover:active,
#banner input[type="button"]:hover:active,
#banner button:hover:active,
#banner .button:hover:active {
background-color: rgba(206, 27, 40, 0.25); }
#banner input[type="submit"].primary,
#banner input[type="reset"].primary,
#banner input[type="button"].primary,
#banner button.primary,
#banner .button.primary {
box-shadow: none;
background-color: #ce1b28;
color: #ffffff !important; }
#banner input[type="submit"].primary:hover,
#banner input[type="reset"].primary:hover,
#banner input[type="button"].primary:hover,
#banner button.primary:hover,
#banner .button.primary:hover {
background-color: #e2212f;
box-shadow: none; }
#banner input[type="submit"].primary:hover:active,
#banner input[type="reset"].primary:hover:active,
#banner input[type="button"].primary:hover:active,
#banner button.primary:hover:active,
#banner .button.primary:hover:active {
background-color: #b71824; }
#banner label {
color: #ffffff; }
#banner input[type="text"],
#banner input[type="password"],
#banner input[type="email"],
#banner input[type="tel"],
#banner input[type="search"],
#banner input[type="url"],
#banner select,
#banner textarea {
background-color: rgba(255, 255, 255, 0.075);
border-color: rgba(255, 255, 255, 0.25); }
#banner input[type="text"]:focus,
#banner input[type="password"]:focus,
#banner input[type="email"]:focus,
#banner input[type="tel"]:focus,
#banner input[type="search"]:focus,
#banner input[type="url"]:focus,
#banner select:focus,
#banner textarea:focus {
border-color: #ce1b28;
box-shadow: 0 0 0 1px #ce1b28; }
#banner select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 1.0)' /%3E%3C/svg%3E"); }
#banner select option {
color: rgba(255, 255, 255, 0.5);
background-color: #111111; }
#banner input[type="checkbox"] + label,
#banner input[type="radio"] + label {
color: rgba(255, 255, 255, 0.5); }
#banner input[type="checkbox"] + label:before,
#banner input[type="radio"] + label:before {
background: rgba(255, 255, 255, 0.075);
border-color: rgba(255, 255, 255, 0.25); }
#banner input[type="checkbox"]:checked + label:before,
#banner input[type="radio"]:checked + label:before {
background-color: #ce1b28;
border-color: #ce1b28;
color: #ffffff; }
#banner input[type="checkbox"]:focus + label:before,
#banner input[type="radio"]:focus + label:before {
border-color: #ce1b28;
box-shadow: 0 0 0 1px #ce1b28; }
#banner ::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.4) !important; }
#banner :-moz-placeholder {
color: rgba(255, 255, 255, 0.4) !important; }
#banner ::-moz-placeholder {
color: rgba(255, 255, 255, 0.4) !important; }
#banner :-ms-input-placeholder {
color: rgba(255, 255, 255, 0.4) !important; }
#banner ul.alt li {
border-top-color: rgba(255, 255, 255, 0.25); }
#banner table tbody tr {
border-color: rgba(255, 255, 255, 0.25); }
#banner table tbody tr:nth-child(2n + 1) {
background-color: rgba(255, 255, 255, 0.075); }
#banner table th {
color: #ffffff; }
#banner table thead {
border-bottom-color: rgba(255, 255, 255, 0.25); }
#banner table tfoot {
border-top-color: rgba(255, 255, 255, 0.25); }
#banner table.alt tbody tr td {
border-color: rgba(255, 255, 255, 0.25); }
#banner .highlights .content {
background: #111111;
box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.025); }
#banner .testimonials .content {
background: #111111;
box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.025); }
#banner .testimonials .content .credit strong {
color: #ce1b28; }
#banner > .inner {
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
-moz-transition: opacity 1s ease, -moz-transform 1s ease;
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
-ms-transition: opacity 1s ease, -ms-transform 1s ease;
transition: opacity 1s ease, transform 1s ease;
opacity: 1;
position: relative;
z-index: 3; }
#banner > .inner > :last-child {
margin-bottom: 0; }
#banner h1 {
font-size: 4rem;
margin-bottom: 1rem; }
#banner p {
font-size: 1.5rem; }
#banner a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none; }
#banner a:hover {
color: #ffffff; }
#banner video {
-moz-transform: translateX(50%) translateY(50%);
-webkit-transform: translateX(50%) translateY(50%);
-ms-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
bottom: 50%;
height: auto;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: absolute;
right: 50%;
width: auto; }
#banner:before {
-moz-transition: opacity 3s ease;
-webkit-transition: opacity 3s ease;
-ms-transition: opacity 3s ease;
transition: opacity 3s ease;
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
background: #111111;
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0.45;
position: absolute;
top: 0;
width: 100%;
z-index: 1; }
#banner:after {
background: linear-gradient(135deg, #ce1b28 0%, #111111 74%);
content: ' ';
display: block;
height: 100%;
left: 0;
opacity: 0.6;
position: absolute;
top: 0;
webkit-linear-gradientidth: 100%;
width: 100%;
z-index: 1; }
#banner.small {
height: 30vh !important;
min-height: 30vh; }
#media screen and (max-width: 1280px) {
#banner video {
display: none; } }
#media screen and (max-width: 736px) {
#banner {
height: auto !important;
min-height: 0;
padding: 4rem 2rem 4rem 2rem; }
#banner .inner {
width: 100%; }
#banner h1 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
padding-bottom: 0; }
#banner p {
font-size: 1.25rem; }
#banner br {
display: none; }
#banner .button {
width: 100%; } }
#media screen and (max-width: 480px) {
#banner p {
font-size: 1rem; } }
body.is-preload #banner .inner {
-moz-transform: scale(0.99);
-webkit-transform: scale(0.99);
-ms-transform: scale(0.99);
transform: scale(0.99);
opacity: 0; }
body.is-preload #banner:before {
opacity: 1; }
This rule is creating the gradient overlay, so try removing it
#banner:after {
background: linear-gradient(135deg, #ce1b28 0%, #111111 74%);
}
or adding this:
#banner:after {
background: none!important;
}
Should fix it
Related
Hello, I'm learning CSS and was wondering how can I implement the styling above. What kind of effect/style is it called?
I've never implemented something like that before so I don't know where to even start.
I have implemented something. Which is very resembles the design you have shared.
.button {
position: relative;
padding: 20px 25px;
background: #0977d0;
color: #fff;
border: 0;
font-size: 14px;
font-weight: 700;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
}
.button:before {
width: 20px;
height: 20px;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transition: all 0.4s ease-in-out;
opacity: 0;
}
.button span {
position: relative;
z-index: 1;
}
.button:hover::before {
width: 70px;
height: 70px;
opacity: 1;
}
<button class="button"><span>Pressed</span></button>
<button>Click Me!</button>
And Css code
<style type="text/css">
#keyframes gradient {
0% {
background: radial-gradient(circle at center, rgba( 255, 125 , 125, 0 ) 0%, #fff 0%, #fff 100%);
}
25% {
background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.3 ) 24%, #fff 25%, #fff 100%);
}
50% {
background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.5 ) 49%, #fff 50%, #fff 100%);
}
75% {
background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.8 ) 74%, #fff 75%, #fff 100%);
}
100% {
color: #fff;
background: radial-gradient(circle at center, #f88 99%, #fff 100%, #fff 100%);
}
}
body {
background: #68d;
}
button {
margin-left: calc( 50vw - 175px );
margin-top: calc( 50vh - 30px );
width: 350px;
height: 60px;
border: none;
border-radius: 5px;
background: #fff;
font-weight: bold;
font-size: 1.1em;
color: #666;
box-shadow: 0 6px 6px #06f;
outline: none;
}
button:active {
/* set time duration to your needs */
animation: gradient 100ms;
background: #f88;
color: #fff;
box-shadow: none;
}
</style>
Can also be achieved using JS and CSS classes
<div class='button'></div>
CSS
.button {
width: 220px;
height: 70px;
background-color:blue;
overflow: hidden;
position: relative;
cursor: pointer;
transition: 0.3s;
}
.ripple {
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
position: absolute;
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
}
#keyframes ripple {
to {
transform: scale(3.5);
opacity: 0;
}
}
JS
function buttonClick() {
var buttons = document.querySelectorAll('.button')
Array.prototype.forEach.call(buttons, function(button) {
button.addEventListener('click', createRipple)
})
}
function createRipple(element) {
var circle = document.createElement('div')
this.appendChild(circle)
var dimensions = Math.max(this.clientWidth, this.clientHeight)
circle.style.width = circle.style.height = dimensions + 'px'
circle.style.left = element.clientX - this.offsetLeft - dimensions / 2 + 'px'
circle.style.top = element.clientY - this.offsetTop - dimensions / 2 + 'px'
circle.classList.add('ripple')
circle.addEventListener('animationend', () => {
circle.remove()
})
}
hey guys i´ve got a problem here, im building a website with a freee template and i ran into a problem, while i was doing the las few touches, i ran into a problem, my images from the slider dont appear as full width on mobile like in desktop, could you help me pls?
much appreciated, here is the code
body {
background: #fff;
font-family: "Open Sans", Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8;
color: #868e96;
}
.img-fluid{
width: 255px;
height: 255px;
object-fit: cover;
}
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
h1, h2, h3, h4, h5 {
color: #000;
}
.btn, .form-control {
outline: none;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Header */
header {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 5;
}
header .navbar-brand {
text-transform: uppercase;
letter-spacing: .2em;
font-weight: 400;
}
header .navbar-brand span {
color: #007bff;
}
header .top-bar {
background: #007bff;
}
header .top-bar a {
color: #fff;
padding: 10px;
font-size: 13px;
display: inline-block;
}
header .top-bar .cta-btn {
display: inline-block;
padding-right: 15px;
padding-left: 15px;
background: #5AC8D8;
}
header .top-bar .cta-btn:hover {
-webkit-box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1);
}
header .top-bar .social {
margin-bottom: 0;
}
header .top-bar .social li {
display: inline-block;
text-align: center;
}
header .top-bar .social li a {
color: #fff;
padding: 10px;
width: 40px;
display: inline-block;
}
#media (max-width: 991px) {
header .top-bar .social li a {
padding-left: 10px;
padding-right: 10px;
width: inherit;
}
}
header .top-bar .social li a:hover {
background: #5AC8D8;
color: #fff;
-webkit-box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1);
box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1);
}
header .navbar {
padding-top: 0;
padding-bottom: 0;
background: white !important;
}
#media (max-width: 1199px) {
header .navbar {
background: white !important;
padding-top: .5rem;
padding-bottom: .5rem;
}
}
header .navbar .nav-link {
padding: 1.7rem 1rem;
outline: none !important;
}
#media (max-width: 1199px) {
header .navbar .nav-link {
padding: .5rem 0rem;
}
}
header .navbar .nav-link.active {
color: #007bff !important;
}
header .navbar .dropdown-menu {
font-size: 14px;
border-radius: 4px;
border: none;
-webkit-box-shadow: 0 2px 20px -5px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 20px -5px rgba(0, 0, 0, 0.1);
}
header .navbar .dropdown-menu .dropdown-item.active {
background: #f8f9fa;
color: #007bff !important;
}
header .navbar .dropdown-menu a {
padding-top: 7px;
padding-bottom: 7px;
}
/* Owl Carousel */
.owl-carousel .owl-item {
opacity: .4;
}
.owl-carousel .owl-item.active {
opacity: 1;
}
.owl-carousel .owl-nav {
position: absolute;
top: 50%;
width: 100%;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: -10px;
}
.owl-carousel .owl-nav .owl-prev span:before,
.owl-carousel .owl-nav .owl-next span:before {
font-size: 40px;
}
.owl-carousel .owl-nav .owl-prev {
left: 30px !important;
}
.owl-carousel .owl-nav .owl-next {
right: 30px !important;
}
.owl-carousel .owl-dots {
text-align: center;
}
.owl-carousel .owl-dots .owl-dot {
width: 10px;
height: 10px;
margin: 5px;
border-radius: 50%;
background: #e6e6e6;
}
.owl-carousel .owl-dots .owl-dot.active {
background: #007bff;
}
.owl-carousel.home-slider {
z-index: 1;
position: relative;
}
.owl-carousel.home-slider .owl-nav {
opacity: 0;
visibility: hidden;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
}
.owl-carousel.home-slider .owl-nav button {
color: #fff;
}
.owl-carousel.home-slider:focus .owl-nav, .owl-carousel.home-slider:hover .owl-nav {
opacity: 1;
visibility: visible;
}
.owl-carousel.home-slider .slider-item {
background-size:cover;
background-repeat: no-repeat;
background-position: center center;
}
.owl-carousel.home-slider .slider-item .slider-text {
color: #fff;
height: calc(100vh - 117px);
min-height: 700px;
}
.owl-carousel.home-slider .slider-item .slider-text h1 {
font-size: 72px;
color: #fff;
line-height: 1.2;
font-weight: 300;
}
#media (max-width: 991px) {
.owl-carousel.home-slider .slider-item .slider-text h1 {
font-size: 40px;
}
}
.owl-carousel.home-slider .slider-item .slider-text p {
font-size: 20px;
line-height: 1.5;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
}
.owl-carousel.home-slider.inner-page .slider-item {
height: calc(50vh - 117px);
min-height: 500px;
}
.owl-carousel.home-slider.inner-page .slider-item .slider-text {
color: #fff;
height: calc(50vh - 117px);
min-height: 500px;
}
.owl-carousel.home-slider .owl-dots {
position: absolute;
bottom: 150px;
width: 100%;
}
.owl-carousel.home-slider .owl-dots .owl-dot {
width: 18px;
height: 18px;
margin: 5px;
border-radius: 50%;
background: #e6e6e6;
background: none;
border: 2px solid rgba(255, 255, 255, 0.5);
outline: none !important;
position: relative;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
}
.owl-carousel.home-slider .owl-dots .owl-dot span {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50% !important;
left: 50%;
top: 50%;
display: block;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.owl-carousel.home-slider .owl-dots .owl-dot.active {
border: 2px solid white;
}
.owl-carousel.home-slider .owl-dots .owl-dot.active span {
background: white;
}
.owl-carousel.major-caousel .owl-stage-outer {
padding-top: 30px;
padding-bottom: 30px;
}
.owl-carousel.major-caousel .owl-nav .owl-prev, .owl-carousel.major-caousel .owl-nav .owl-next {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
color: #495057;
}
.owl-carousel.major-caousel .owl-nav .owl-prev:hover, .owl-carousel.major-caousel .owl-nav .owl-prev:focus, .owl-carousel.major-caousel .owl-nav .owl-next:hover, .owl-carousel.major-caousel .owl-nav .owl-next:focus {
color: #868e96;
outline: none;
}
.owl-carousel.major-caousel .owl-nav .owl-prev.disabled, .owl-carousel.major-caousel .owl-nav .owl-next.disabled {
color: #dee2e6;
}
.owl-carousel.major-caousel .owl-nav .owl-prev {
left: -60px !important;
}
.owl-carousel.major-caousel .owl-nav .owl-next {
right: -60px !important;
}
.owl-carousel.major-caousel .owl-dots {
bottom: -30px !important;
position: relative;
}
.owl-custom-nav {
float: right;
position: relative;
z-index: 10;
}
.owl-custom-nav .owl-custom-prev,
.owl-custom-nav .owl-custom-next {
padding: 10px;
font-size: 30px;
background: #ccc;
line-height: 0;
width: 60px;
text-align: center;
display: inline-block;
}
.home-feature {
margin-top: -120px;
position: relative;
z-index: 2;
}
.home-feature .one-col, .home-feature .two-col, .home-feature .three-col {
position: relative;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
z-index: 2;
top: 0;
border-bottom: 10px solid #5AC8D8;
}
#media (max-width: 767px) {
.home-feature .one-col, .home-feature .two-col, .home-feature .three-col {
border: none;
margin-bottom: 10px;
}
}
.home-feature .one-col .col-inner, .home-feature .two-col .col-inner, .home-feature .three-col .col-inner {
position: relative;
}
.home-feature .one-col .icon, .home-feature .two-col .icon, .home-feature .three-col .icon {
font-size: 200px;
color: rgba(255, 255, 255, 0.07);
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
}
.home-feature .one-col h2, .home-feature .two-col h2, .home-feature .three-col h2 {
color: #fff;
font-size: 16px;
letter-spacing: .05em;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
.home-feature .one-col p, .home-feature .two-col p, .home-feature .three-col p {
color: rgba(255, 255, 255, 0.7);
font-weight: 300;
}
.home-feature .one-col p:last-child, .home-feature .two-col p:last-child, .home-feature .three-col p:last-child {
margin-bottom: 0;
}
.home-feature .one-col .btn-more, .home-feature .two-col .btn-more, .home-feature .three-col .btn-more {
-webkit-transition: .15s all ease-out;
-o-transition: .15s all ease-out;
transition: .15s all ease-out;
opacity: 0;
visibility: hidden;
position: absolute;
display: block;
text-align: center;
bottom: -50px;
left: 0;
right: 0;
padding: 20px;
background: #5AC8D8;
z-index: -1;
color: #fff;
-webkit-box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.4);
}
#media (max-width: 767px) {
.home-feature .one-col .btn-more, .home-feature .two-col .btn-more, .home-feature .three-col .btn-more {
opacity: 1;
visibility: visible;
position: relative;
bottom: 0;
}
}
.home-feature .one-col .btn-more:hover, .home-feature .two-col .btn-more:hover, .home-feature .three-col .btn-more:hover {
background: #6fcfdd;
}
.home-feature .one-col:hover, .home-feature .two-col:hover, .home-feature .three-col:hover {
top: -10px;
z-index: 3;
-webkit-box-shadow: 0 4px 40px -5px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 40px -5px rgba(0, 0, 0, 0.4);
}
#media (max-width: 767px) {
.home-feature .one-col:hover, .home-feature .two-col:hover, .home-feature .three-col:hover {
top: 0;
}
}
.home-feature .one-col:hover .icon, .home-feature .two-col:hover .icon, .home-feature .three-col:hover .icon {
-webkit-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%);
}
.home-feature .one-col:hover .btn-more, .home-feature .two-col:hover .btn-more, .home-feature .three-col:hover .btn-more {
opacity: 1;
visibility: visible;
bottom: -50px;
}
#media (max-width: 767px) {
.home-feature .one-col:hover .btn-more, .home-feature .two-col:hover .btn-more, .home-feature .three-col:hover .btn-more {
bottom: 0;
}
}
.home-feature .one-col {
background: #007bff;
}
.home-feature .two-col {
background: #006fe6;
}
.home-feature .three-col {
background: #0067d6;
}
.section {
padding: 7em 0;
}
.cta-link {
background: #007bff;
padding: 3.5em 0 3em 0;
display: block;
text-align: center;
}
.cta-link:focus, .cta-link:active {
outline: none;
}
.cta-link span {
line-height: 1.2;
}
.cta-link .sub-heading {
color: #fff;
display: block;
font-size: 20px;
}
.cta-link .heading {
font-size: 50px;
color: #001933;
}
#media (max-width: 991px) {
.cta-link .heading {
font-size: 30px;
}
}
.cta-link:hover {
background: #006fe6;
}
.cover_1 {
background-size: cover;
background-position: center center;
padding: 7em 0;
}
.cover_1 .sub-heading {
color: rgba(255, 255, 255, 0.7);
font-size: 22px;
}
.cover_1 .heading {
font-size: 50px;
color: white;
font-weight: 300;
}
.heading {
color: #000;
}
.heading.border-bottom {
position: relative;
padding-bottom: 30px;
}
.heading.border-bottom:before {
bottom: 0;
position: absolute;
content: "";
width: 50px;
height: 2px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: #007bff;
}
.text-black {
color: #000 !important;
}
.stretch-section .video {
display: block;
position: relative;
-webkit-box-shadow: 4px 4px 70px -20px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 70px -20px rgba(0, 0, 0, 0.5);
}
.media-feature .icon {
font-size: 60px;
color: #007bff;
}
.media-feature h3 {
font-size: 20px;
}
.media-custom {
background: #fff;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.media-custom .meta-post {
color: #adb5bd;
font-size: 13px;
text-transform: uppercase;
}
.media-custom .meta-chat {
color: #ced4da;
}
.media-custom .meta-chat:hover {
color: #868e96;
}
.media-custom:focus, .media-custom:hover {
-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
}
.media-custom .media-body {
padding: 30px;
}
.media-custom .media-body h3 {
font-size: 20px;
}
.media-custom .media-body p:last-child {
margin-bottom: 0;
}
.list-unstyled.check li {
position: relative;
padding-left: 30px;
line-height: 1.3;
margin-bottom: 10px;
}
.list-unstyled.check li:before {
color: #5AC8D8;
left: 0;
font-family: "Ionicons";
content: "\f122";
position: absolute;
}
.custom-tabs .border-right {
border-right: 1px solid #dee2e6;
}
#media (max-width: 767px) {
.custom-tabs .border-right {
border-right: none;
}
}
.custom-tabs .nav-pills .nav-link {
padding-left: 0;
font-size: 26px;
font-weight: 100;
color: #adb5bd;
line-height: 1.2;
margin-bottom: 10px;
}
.custom-tabs .nav-pills .nav-link span {
font-size: 18px;
}
.custom-tabs .nav-pills .nav-link.active {
background: none;
color: #007bff;
padding-left: 20px;
position: relative;
}
.custom-tabs .nav-pills .nav-link.active:before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
width: 2px;
background: #5AC8D8;
}
.custom-tabs .tab-pane .icon {
font-size: 60px;
display: block;
color: #007bff;
}
.custom-tabs .tab-pane h2 {
font-size: 60px;
font-weight: 300;
}
#modalAppointment .modal-content {
border-radius: 0;
border: none;
}
#modalAppointment .modal-body, #modalAppointment .modal-footer {
padding: 40px;
}
.site-footer {
padding: 7em 0;
background: #f2f2f2;
background: #283E56;
color: rgba(255, 255, 255, 0.7);
}
.site-footer a {
color: rgba(255, 255, 255, 0.5);
}
.site-footer a:hover {
color: white;
}
.site-footer h3 {
color: #fff;
font-size: 16px;
font-weight: 700;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
margin-bottom: 20px;
}
.site-footer .footer-link li {
line-height: 1.3;
margin-bottom: 15px;
}
.site-footer hr {
width: 100%;
}
.site-footer .border-t {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.copyright {
font-size: 14px;
}
.element-animate {
opacity: 0;
visibility: hidden;
}
html code:
<section class="home-slider inner-page owl-carousel">
<div class="slider-item" style="background-image: url({{ asset('img/slider-2.jpg') }});">
<div class="container">
<div class="row slider-text align-items-center">
<div class="col-md-7 col-sm-12 element-animate">
<h1>{% trans %}Welcome to Denticlin{% endtrans %}</h1>
</div>
</div>
</div>
</div>
</section>
<!-- END section -->
<section class="section stretch-section">
<div class="container">
<div class="row justify-content-center mb-5 element-animate">
<div class="col-md-8 text-center mb-5">
<h2 class="text-uppercase heading border-bottom mb-4">{% trans %}sdfsdfn{% endtrans %}</h2>
<p class="mb-0 lead">{% trans %}dsfsfs{% endtrans %}</p><br>
<p class="mb-0 lead">{% trans %}Wsdfs.{% endtrans %}</p><br>
<p class="mb-0 lead">{% trans %}sdfsdfn.{% endtrans %}</p><br>
</div>
</div>
</div>
</section>
Please, if possible, provide your HTML code, without it nobody can really tell what is going on.
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 1s;
}
#-webkit-keyframes {
0% {background-color:#4CAF50;}
25% {background-color: red;}
50% {background-color: yellow;}
75% {background-color: blue;}
100% {background-color: orange;}
}
.button2:hover {
height: 250px;
min-width: 200px;
font-size: 75px;
font-family: american captain;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>
I have started learning css3 animations. All the animations which i wanted to do seem to run fine except for the color change which i have put in 'keyframes'. The website from which I was learning animations showed the exact same way but it doesn't seem to work on my project. Any help would be highly appreciated. Thanks :-)
You have to give the animation a name..and then apply that animation as a property...
#-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: orange;
}
}
.button {
animation: color-change 12s ease infinite;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
animation: color-change 12s ease infinite;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 1s;
}
#-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: orange;
}
}
.button2:hover {
height: 250px;
min-width: 200px;
font-size: 75px;
font-family: american captain;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>
I'm trying to replace a header background image with a short video. I've searched a lot but couldn't find a proper solution to it.
I could find this article but couldn't do much with it as I'm still a novice in web development.
Can anyone please help me with the changes required in my code.
Here is a link to my Fiddle.
HTML:
<section>
<header>
<h1><strong>Header</strong></h1>
<p>Lorem Ipsum</p>
</header>
<footer>
US
UK
India
China
Mongolia
</footer>
</section>
CSS:
.dark {
color: #aaa;
color: rgba(255, 255, 255, 0.65);
}
#header {
position: relative;
margin: 0;
background-image: url("http://www.mygreencity.in/images/slider/1.jpg");
background-size: auto, cover;
background-position: top left, center center;
background-repeat: repeat, no-repeat;
padding: 14em 0 14em 0;
text-align: center;
color: #fff;
}
#header header h1 {
font-size: 2.25em;
line-height: 1.25em;
margin-bottom: 0;
}
#header header p {
margin-top: 1.25em;
font-weight: 100;
padding: 0;
font-size: 1.25em;
line-height: 1.5em;
text-align: center;
}
#header footer {
padding-top: 1.5em;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-appearance: none;
position: relative;
display: inline-block;
background: #3d3d3d;
padding: 0.85em 3em 0.85em 3em;
border-radius: 0.25em;
cursor: pointer;
border: 0;
color: #fff;
text-align: center;
text-decoration: none;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
background: #4f4f4f;
}
input[type="button"].alt,
input[type="submit"].alt,
input[type="reset"].alt,
button.alt,
.button.alt {
color: inherit;
box-shadow: inset 0 0 0 1px #e6e6e6;
background: none;
}
input[type="button"].alt:hover,
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
button.alt:hover,
.button.alt:hover {
background: rgba(0, 0, 0, 0.025);
}
.dark input[type="button"],
.dark input[type="submit"],
.dark input[type="reset"],
.dark button,
.dark .button {
background: rgba(255, 255, 255, 0.15);
box-shadow: inset 0 0 0 1px #fff;
color: #fff;
}
.dark input[type="button"]:hover,
.dark input[type="submit"]:hover,
.dark input[type="reset"]:hover,
.dark button:hover,
.dark .button:hover {
background: rgba(255, 255, 255, 0.25);
}
.dark input[type="button"].alt,
.dark input[type="submit"].alt,
.dark input[type="reset"].alt,
.dark button.alt,
.dark .button.alt {
background: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.dark input[type="button"].alt:hover,
.dark input[type="submit"].alt:hover,
.dark input[type="reset"].alt:hover,
.dark button.alt:hover,
.dark .button.alt:hover {
background: rgba(255, 255, 255, 0.15);
box-shadow: inset 0 0 0 1px #fff;
}
You could use the jquery videoBG plugin: http://syddev.com/jquery.videoBG/
Or you could add the following code: https://jsfiddle.net/5oxjuyum/1/
The alternative image is displayed when the browser doesn't support the video.
HTML
<video id="video" autoplay>
<source src="video.mp4" type="video/mp4" />
<img id="alternative" src="http://www.mygreencity.in/images/slider/1.jpg" />
</video>
CSS
#video, #alternative {
width: 100%;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
https://css-tricks.com/snippets/jquery/append-site-overlay-div/
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'>VIDEO TAG</div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
I use the chosen library and my dropdown appear like this, how can I solve this.
Thanks.
Like you can see on the picture the list of values appear under another element instead of being at the first plan, so the list of values is invisible.
What should I change in the CSS to workaround that.
Here is the CSS :
/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com
Version 1.2.0
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2014 Harvest http://getharvest.com
MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/
/* #group Base */
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
zoom: 1;
*display: inline;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.chosen-container * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chosen-container .chosen-drop {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
width: 100%;
border: 1px solid #aaa;
border-top: 0;
background: #fff;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
left: 0;
}
.chosen-container a {
cursor: pointer;
}
/* #end */
/* #group Single Chosen */
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
padding: 0 0 0 8px;
height: 25px;
border: 1px solid #aaa;
border-radius: 5px;
background-color: #fff;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background-clip: padding-box;
box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
color: #444;
text-decoration: none;
white-space: nowrap;
line-height: 24px;
}
.chosen-container-single .chosen-default {
color: #999;
}
.chosen-container-single .chosen-single span {
display: block;
overflow: hidden;
margin-right: 26px;
text-overflow: ellipsis;
white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
position: absolute;
top: 6px;
right: 26px;
display: block;
width: 12px;
height: 12px;
background: url('chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
position: absolute;
top: 0;
right: 0;
display: block;
width: 18px;
height: 100%;
}
.chosen-container-single .chosen-single div b {
display: block;
width: 100%;
height: 100%;
background: url('chosen-sprite.png') no-repeat 0px 2px;
}
.chosen-container-single .chosen-search {
position: relative;
z-index: 1010;
margin: 0;
padding: 3px 4px;
white-space: nowrap;
}
.chosen-container-single .chosen-search input[type="text"] {
margin: 1px 0;
padding: 4px 20px 4px 5px;
width: 100%;
height: auto;
outline: 0;
border: 1px solid #aaa;
background: white url('chosen-sprite.png') no-repeat 100% -20px;
background: url('chosen-sprite.png') no-repeat 100% -20px;
font-size: 1em;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-single .chosen-drop {
margin-top: -1px;
border-radius: 0 0 4px 4px;
background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
position: absolute;
left: -9999px;
}
/* #end */
/* #group Results */
.chosen-container .chosen-results {
color: #444;
position: relative;
/*overflow-x: hidden;
overflow-y: auto;*/
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
display: none;
margin: 0;
padding: 5px 6px;
list-style: none;
line-height: 15px;
word-wrap: break-word;
-webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: #ccc;
cursor: default;
}
.chosen-container .chosen-results li.highlighted {
background-color: #3875d7;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
color: #fff;
}
.chosen-container .chosen-results li.no-results {
color: #777;
display: list-item;
background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
display: list-item;
font-weight: bold;
cursor: default;
}
.chosen-container .chosen-results li.group-option {
padding-left: 15px;
}
.chosen-container .chosen-results li em {
font-style: normal;
text-decoration: underline;
}
/* #end */
/* #group Multi Chosen */
.chosen-container-multi .chosen-choices {
position: relative;
overflow: hidden;
margin: 0;
padding: 0 5px;
width: 100%;
height: auto !important;
height: 1%;
border: 1px solid #aaa;
background-color: #fff;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
cursor: text;
}
.chosen-container-multi .chosen-choices li {
float: left;
list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
margin: 1px 0;
padding: 0;
height: 25px;
outline: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none;
color: #999;
font-size: 100%;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-multi .chosen-choices li.search-choice {
position: relative;
margin: 3px 5px 3px 0;
padding: 3px 20px 3px 5px;
border: 1px solid #aaa;
max-width: 100%;
border-radius: 3px;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-size: 100% 19px;
background-repeat: repeat-x;
background-clip: padding-box;
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice span {
word-wrap: break-word;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
position: absolute;
top: 4px;
right: 3px;
display: block;
width: 12px;
height: 12px;
background: url('chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
padding-right: 5px;
border: 1px solid #ccc;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-results {
margin: 0;
padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
display: list-item;
color: #ccc;
cursor: default;
}
/* #end */
/* #group Active */
.chosen-container-active .chosen-single {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single {
border: 1px solid #aaa;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
box-shadow: 0 1px 0 #fff inset;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
border-left: none;
background: transparent;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
background-position: -18px 2px;
}
.chosen-container-active .chosen-choices {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
color: #222 !important;
}
/* #end */
/* #group Disabled Support */
.chosen-disabled {
opacity: 0.5 !important;
cursor: default;
}
.chosen-disabled .chosen-single {
cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
cursor: default;
}
/* #end */
/* #group Right to Left */
.chosen-rtl {
text-align: right;
}
.chosen-rtl .chosen-single {
overflow: visible;
padding: 0 8px 0 0;
}
.chosen-rtl .chosen-single span {
margin-right: 0;
margin-left: 26px;
direction: rtl;
}
.chosen-rtl .chosen-single-with-deselect span {
margin-left: 38px;
}
.chosen-rtl .chosen-single div {
right: auto;
left: 3px;
}
.chosen-rtl .chosen-single abbr {
right: auto;
left: 26px;
}
.chosen-rtl .chosen-choices li {
float: right;
}
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
direction: rtl;
}
.chosen-rtl .chosen-choices li.search-choice {
margin: 3px 5px 3px 0;
padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
right: auto;
left: 4px;
}
.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
left: 9999px;
}
.chosen-rtl.chosen-container-single .chosen-results {
margin: 0 0 4px 4px;
padding: 0 4px 0 0;
}
.chosen-rtl .chosen-results li.group-option {
padding-right: 15px;
padding-left: 0;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
border-right: none;
}
.chosen-rtl .chosen-search input[type="text"] {
padding: 4px 5px 4px 20px;
background: white url('chosen-sprite.png') no-repeat -30px -20px;
background: url('chosen-sprite.png') no-repeat -30px -20px;
direction: rtl;
}
.chosen-rtl.chosen-container-single .chosen-single div b {
background-position: 6px 2px;
}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
background-position: -12px 2px;
}
/* #end */
/* #group Retina compatibility */
#media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
.chosen-rtl .chosen-search input[type="text"],
.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single div b,
.chosen-container-single .chosen-search input[type="text"],
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
.chosen-container .chosen-results-scroll-down span,
.chosen-container .chosen-results-scroll-up span {
background-image: url('chosen-sprite#2x.png') !important;
background-size: 52px 37px !important;
background-repeat: no-repeat !important;
}
}
/* #end */
Elements showing on top or below each other can be managed in css with z-index property. You may apply -1 for the element that comes on the top.
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Place dropdown inside a div with class 'chosen-upward'
<div class="chosen-upward">
your dropdown with class 'chosen-select'
</div>
Add to style
.chosen-upward.chosen-drop{top:inherit!important; bottom:33px!important;border-bottom-right-radius:0px!important;border-bottom-left-radius:0px!important;border-top-right-radius:4px;border-top-left-radius:4px;box-shadow:none!important;}
This will make the dropdown appear above the select control.