I have a card and images are fetched from BE. The image is a background image of a card. The text goes above this image. I need to add a gradient above the image and below text. Also when user hovers over the card, gradient color should change. How do I make the image to fill the entire card and show linear-gradient on an image?
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<img class="background" src="../scr/images/image.png">
<h2> Title
<h2>
</li>
</ul>
// enter code here
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
display:inline-block;
}
.pickgradient {
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<div class="pickgradient">
<img src="https://i.imgur.com/5I0iHYf.jpg" />
</div>
<h2> Title dfdf
</h2>
</li>
</ul>
try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: auto;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background-position: center center;
background-repeat: no-repeat;
background: #000;
background-size: cover;
width: 100%;
height: auto;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<img class="c-graidient__img" src="https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb" />
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>
Here is a solution, try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: 100vh;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background: #000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<div class="c-graidient__img"></div>
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>
Related
I have a button with a loading animation inside and when I hover it I want to display a gradient effect as a whole thing.
I manage to do it but if you move the cursor over the loading effect and the text you will notice the division between these two.
Please take a look at the following snippet which shows my problem:
document.getElementById("search").onclick = function() {
var hiddeninputs = document.getElementById("loading");
hiddeninputs.style.display = "inline-flex";
$("#loading").delay(1500).fadeOut();
}
.hidden {
display: none;
}
#loading {
width: 10px;
height: 10px;
border: 5px solid #ccc;
border-top-color: #004E98;
border-radius: 100%;
animation: round 2s linear infinite;
}
#keyframes round {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
.btn-search {
width: 20%;
display: inline-block;
text-align: center;
margin: 10px;
height: 12%;
margin-top: 25px;
box-sizing: border-box;
border: 2px solid #00386d;
border-radius: 5px;
ext-align: center;
background-color: #004E98;
color: #fff;
text-decoration: none;
font-size: 17px;
box-shadow: 0px 5px 20px rgba(25, 25, 25, .3);
}
#button-search:hover {
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#button-search:active {
background-color: #003465;
transform: translateY(1px);
}
#search {
display: inline-block;
text-align: center;
padding: 10px;
padding-left: 25px;
padding-right: 25px;
background-repeat: no-repeat;
background-position: center;
border: hidden;
background-color: #004E98;
color: #fff;
}
#search:hover {
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#search:active {
background-color: #003465;
transform: translateY(1px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-search" id="button-search">
<input type="submit" id="search" value="Buscar" onclick="showHide()">
<div id="loading" class="hidden"></div>
</div>
You had another background on the input element #search and that created another background on top of the background of the div .btn-search. I made them transparent and removed the outline that appears around the input on :active and :focus.
document.getElementById("search").onclick = function() {
var hiddeninputs = document.getElementById("loading");
hiddeninputs.style.display="inline-flex";
$("#loading").delay(1500).fadeOut();
}
.hidden{
display: none;
}
#loading{
width: 10px;
height: 10px;
border: 5px solid #ccc;
border-top-color: #004E98;
border-radius: 100%;
animation: round 2s linear infinite;
}
#keyframes round{
from{transform: rotate(0deg)}
to{transform:rotate(360deg)}
}
.btn-search{
width:20%;
display:inline-block;
text-align: center;
margin:10px;
height: 12%;
margin-top:25px;
box-sizing: border-box;
border: 2px solid #00386d;
border-radius: 5px;
ext-align: center;
background-color: #004E98;
color: #fff;
text-decoration: none;
font-size: 17px;
box-shadow: 0px 5px 20px rgba(25,25,25,.3);
}
#button-search:hover{
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#button-search:active{
background-color: #003465;
transform: translateY(1px);
}
#search{
display: inline-block;
text-align: center;
padding:10px;
padding-left:25px;
padding-right:25px;
background-repeat: no-repeat;
background-position: center;
border: hidden;
background-color: transparent;
color: #fff;
}
#search:hover{
cursor: pointer;
background: transparent;
}
#search:active{
background-color: transparent;
transform: translateY(1px);
}
#search:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-search" id="button-search">
<input type="submit" id="search" value="Buscar" onclick="showHide()">
<div id="loading" class="hidden"></div>
</div>
You could add a transparent background to the input using background-color: rgba(0, 0, 0, 0);
<!DOCTYPE html>
<html lang="es">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>CSS LOADING SPINNERS</title>
<link rel = "stylesheet" type="text/css" href="style.css">
</head>
<body>
<style>
.hidden{
display: none;
}
#loading{
width: 10px;
height: 10px;
border: 5px solid #ccc;
border-top-color: #004E98;
border-radius: 100%;
animation: round 2s linear infinite;
}
#keyframes round{
from{transform: rotate(0deg)}
to{transform:rotate(360deg)}
}
.btn-search{
width:20%;
display:inline-block;
text-align: center;
margin:10px;
height: 12%;
margin-top:25px;
box-sizing: border-box;
border: 2px solid #00386d;
border-radius: 5px;
ext-align: center;
background-color: #004E98;
color: #fff;
text-decoration: none;
font-size: 17px;
box-shadow: 0px 5px 20px rgba(25,25,25,.3);
}
#button-search:hover{
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#button-search:active{
background-color: #003465;
transform: translateY(1px);
}
#search{
display: inline-block;
text-align: center;
padding:10px;
padding-left:25px;
padding-right:25px;
background-repeat: no-repeat;
background-position: center;
border: hidden;
background-color: rgba(0,0,0,0);
color: #fff;
}
/* #search:hover{
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
} */
#search:active{
background-color: #003465;
transform: translateY(1px);
}
</style>
<div class="btn-search" id="button-search">
<input type="submit" id="search" value="Buscar" onclick="showHide()">
<div id= "loading" class="hidden"></div>
</div>
<script type="text/javascript">
document.getElementById("search").onclick = function() {
var hiddeninputs = document.getElementById("loading");
hiddeninputs.style.display="inline-flex";
$("#loading").delay(1500).fadeOut();
}
</script>
</body>
</html>
How would I remove the black borders on my video background below. It appears like this in IE11:
Whereas in Google Chrome it appears like this:
What is causing the difference? My code is as follows:
<style>
#header {
border-bottom: 0px;
margin-bottom: 0px;
}
.featured-area {
margin-top: 0px;
margin-bottom: 0px;
}
#recent-posts {
margin-top: 27px;
}
#blurb {
margin-bottom: 27px;
width: 75%;
}
.recent-post-box {
background-color: #f2f2f2;
padding-top: 4px;
margin-top: 40px;
}
#logo {
display: none;
}
#hero {
position: relative;
z-index: 1;
height: 600px;
width: 100%;
margin-bottom: 40px;
vertical-align: middle;
text-align: center;
}
#hero #bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url("http://www.makemeapro.org/wp-content/uploads/2015/07/hero-cover-modified.jpg");
opacity: .4;
max-width:100%;
height:auto;
background-size:cover;
}
#hero video {
width:100%;
max-width:100%;
height: 600px;
object-fit:cover; /* Resize the video to cover parent, like a background-size:cover */
}
#hero #bg {
/* The styles for #bg remain the same, you'd just need to add */
/* one more, so the video that overflows the #hero is hidden: */
overflow:hidden;
}
#outerDiv {
width: 100%;
height: 100%;
}
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
border: 0px;
outline: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
cursor: pointer;
}
.blurb-front-text {
font-size: 1.5em; !important
}
</style>
Fiddle here.
I've had the same problem when both the video tag and the parent div were position absolute. The video parent div needs to be relative and then you can use this code on the video:
position: absolute
top: 0
bottom: 0
left: 0
right: 0
z-index: 1
width: 100%
height: 100%
min-height: 100%
min-width: 100%
object-fit: cover
overflow: hidden
I have created a fixed menu for my website.
Everything is working quite fine, the problem is;
When I scroll down, as soon as the fixed menu starts animating, if I scroll down faster it stops, and when I stop scrolling down, the animation continues until it gets fixed.
The JS is below;
function init() {
window.addEventListener("scroll", function() {
var topbar = $("#topbar"),
header = $("#header-main"),
hdr_img = $("#header-main .inner img"),
hdr_inner = $("#header-main .inner"),
search = $("#search"),
cart = $("#cart");
$(window).width() > 1200 && ($(this).scrollTop() > 235 ? (header.addClass("sabit"), hdr_inner.addClass("sabit"), search.addClass("sabit"), cart.addClass("sabit"), hdr_img.addClass("sabit"), topbar.addClass("sabit"), header.stop().animate({
top: "-44px",
opacity: 1
}, 800), topbar.stop().animate({
top: "-44px",
opacity: 0
}, 900)) : $(this).scrollTop() < 1 && (header.stop().animate({
top: "0px",
opacity: 1
}, 800), topbar.stop().animate({
top: "0",
opacity: 1
}, 1300), header.removeClass("sabit"), hdr_inner.removeClass("sabit"), search.removeClass("sabit"), cart.removeClass("sabit"), hdr_img.removeClass("sabit"), topbar.removeClass("sabit")))
})
}
window.onload = init();
Also CSS codes are below;
#topbar {
color: #7BBD42;
background: #2e3a47;
background-image: url("//images....com./sprites/kullanicimenupat.png");
padding: 5px 0;
min-height: 30px;
border-bottom: 1px solid #7bbd42;
border-width: 3px;
}
#topbar.sabit {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
}
#header-main {
background-color: #ffffff;
min-height: 107px;
color: #8c8c8c;
}
#header-main.sabit{
position : fixed;
width: 100%;
z-index: 1010;
padding-top: 35px;
border-bottom: 1px solid #AFC999;
min-height: 100px;
min-height: 99px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(245,245,245,1)), color-stop(93%, rgba(237,237,237,1)), color-stop(99%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}
#header-main .inner {
text-align: left;
margin-top: 25px;
padding: 0;
#header-main .logo img {
/*background-color: #7bbd42;*/
transition: all 0.4s ease-in 0s;
}
#header-main .inner.sabit{
margin-bottom: -15px;
margin-top: 18px;
}
#header-main .inner.sabit img {
max-width: 75%;
margin-top: -4px;
transition: all 0.5s ease 0s;
}
Use a setTimeout inside the scroll event:
var timerX = -1;
$(window).on('scroll', function () {
clearTimeout(timerX);
timnetToChangVp = setTimeout(function() {
init();
}, 200);
});
This is happening because of .stop().
Stop the currently-running animation on the matched elements.
Every time when you scrolling it stopping animation and starting again. Remove .stop() you can see effect then.
My scrolling div wont stretch the height of its parent container when resizing the browser or when toggling a button that adds an extra space on the top.
AUG 27 UPDATE
http://jsfiddle.net/ursp39s9/
The following jfiddle contains a code by ctwheels that has been modified to fit my needs, and as a result I've discovered the issue has to do with a show/hide button filter (Code provided below)
This button adds an extra space at the bottom when the button is pressed, and then dissapears when it's pressed again. However, this seems to be causing issues with the resizeable scrolling div container thats suppose to stretch to 100% height and width to fill the entire parent container. Instead I get a whitespace at the bottom all the time.
So please take a look at my jsfiddle, and see if you can help me fix this issue. Thanks!
Here's the problematic HTML:
<div id="feed-content">
<div id="networkfeed" class="feedpagetab activefeed">
<input type="checkbox" id="filterbutton" role="button">
<label for="filterbutton" onclick=""><span class="filterswitch">Show Me</span><span class="filterswitch">Hide Me</span> </label>
<br /><br />
<div class="borderline"></div>
<section class="filtercontent">
</section><!--Filtercontent ends here-->
And the CSS:
/*----- Show me Button-----*/
.filtercontent {
margin: 0;border-bottom:#000 solid 1px;
padding: 0; height:170px; margin-top:5px;
-webkit-box-sizing: border-box; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; color:#000;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.feedpagetab > section:first-of-type {
float: right;
width: 62.5%;
}
.feedpagetab > section:last-of-type {
display: none;
visibility: hidden;
}
.feedpagetab {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
#filterbutton[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="filterbutton"] {
position: absolute;
top:4px;
padding: 0;
left: 5%;
width: 80px;
text-align: center;
padding: 4px; font-weight:bold;
color: #555;
text-shadow: 1px 1px 1px #DDD;
font-family: Helvetica, Arial, "Sans Serif";
font-size: 13px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
-moz-box-shadow: inset 0px 0px 1px 0px #FFF;
box-shadow: inset 0px 0px 1px 0px #FFF;
background: #EEE;
background: -moz-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#DDD));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#DDD',GradientType=0 );
background: linear-gradient(top, #F9F9F9 0%,#DDD 100%);
}
[for="filterbutton"]:hover {
color: #444444;font-weight:bold;
border-color: #BBB;
background: #CCC;
background: -moz-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#CCC));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#CCC',GradientType=0 );
}
[for="filterbutton"] span.filterswitch:last-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked {color:#FFA317;}
#filterbutton[type=checkbox]:checked ~ .filtercontent {
display: block;
visibility: visible;
width: 100%;
}
#filterbutton[type=checkbox]:checked ~ [for="filterbutton"] span.filterswitch:first-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked ~ [for="filterbutton"] span.filterswitch:last-of-type { color:#3CC;
display: block;
visibility: visible;
}
.borderline { width:100%; border-bottom:#000 solid 1px; height:0px;}
.filtercontent { margin-left:29%; }
I need to create horizontal menu with sliding option and submenu. Because of sliding option I have to set overflow on hidden, but than I have problem with submenu. I would appreciate any help or idea how to solve this problem.
.horizontalni {
border:solid 1px rgba(0,0,0,0.3);
border-radius:4px;
box-shadow:0 0 0 4px rgba(125,125,125,0.1);
padding:0;
position:relative;
width:auto;
max-width:800px;
background:silver;
overflow:hidden;
}
/* navigation items */
.horizontalni .navigation {
background:rgba(0,0,0,0.1);
color:rgba(255,255,255,0.1);
display:block;
font-family:verdana,sans-serif;
font-size:3em;
height:55px;
padding-top:0px;
position:absolute;
text-align:center;
text-shadow:rgba(0,0,0,0.1); 0 0 2px;
width:50px;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
}
.horizontalni:hover .navigation {
background:rgba(0,0,0,0.3);
color:rgba(255,255,255,0.8);
text-shadow:rgba(0,0,0,0.7); 0 0 2px;
}
.horizontalni .navigation:hover {
background:rgba(0,0,0,0.5);
}
.horizontalni .previous {
left:0;
}
.horizontalni .next {
right:0;
}
/* carousel container */
.horizontalni ul {
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
display:-moz-box;
display:-ms-box;
display:-webkit-box;
display:-o-box;
display:box;
list-style-type:none;
margin-top:5px;
margin-bottom:5px;
padding:0;
}
/* standard width and height for the carousel items */
.horizontalni li {
border:solid 1px #333;
height:40px;
margin-right:10px;
width:auto;
min-width:150px;
max-width:300px;
}
/* animation properties for the carousel */
.animate ul {
-moz-transition:margin 1s;
-ms-transition:margin 1s;
-webkit-transition:margin 1s;
-o-transition:margin 1s;
transition:margin 1s;
}
/* different color for each of our items */
.horizontalni li {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
text-align: center;
}
.horizontalni a {
color: #ffffff;
display: inline-block;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
.horizontalni > ul > li a {
padding-left:10px;
padding-right:10px;
line-height: 40px;
filter: none;
}
.horizontalni > ul > li:hover {
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
.horizontalni .has-sub:hover ul {
display: block;
z-index:1;
}
.horizontalni .has-sub ul {
display: none;
min-width: 100%;
text-align: center;
IE7
*width: 100%;
}
.horizontalni .has-sub ul li {
text-align: center;
}
.horizontalni .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
z-index:1;
}
<div id="carousel" class="horizontalni wrapper">
«
»
<ul>
<li >Test1</li>
<li ><a>Test2</a></li>
<li><a>Test3</a></li>
<li ><a>Test4</a></li>
<li ><a>Test5</a></li>
<li class="has-sub parent"><a>Test6</a>
<div class="wrapper">
<ul class="sub">
<li><a>Test61</a></li>
<li><a>Test62</a></li>
<li><a>Test63</a></li>
</ul>
</div>
</li>
<li class="child-element"><a>Test7</a></li>
<li class="child-element"><a>Test8</a></li>
<li class="child-element"><a>Test9</a></li>
</ul>
</div>
<script src="http://www.andismith.com/flexbox-carousel/library/js/modernizr.js"></script>
<script src="http://www.andismith.com/flexbox-carousel/library/js/common.js"></script>
Here is demo of this code: sliding menu demo
Setting the submenu to a fixed position should work.
.has-sub.parent .wrapper {
position: fixed;
}
Here is the JSFiddle