Could someone tell me why isn't my text "Add Product" appearing inside of the button when the user hovers on the button?
Adding
display: flex
for the body seems to fix the issue but I don't wanna set the display of my body to flex. Is there some other way I could make it work?
.button {
background: #f6bc00 no-repeat -12px center;
border: 1px solid #f6bc00;
border-radius: 4px;
color: #fff;
display: inline;
font-size: 9px;
font-weight: 700;
overflow: hidden;
padding: 5px 8px 3px 8px;
text-decoration: none;
line-height: 8px;
text-transform: uppercase;
transition: padding .2s ease, background-position .2s ease, transform .5s ease;;
}
.button:span {
margin: 0;
padding: 0;
}
.button:hover {
transform: scale(1, 1);
padding-left: 88px;
padding-right: 5px;
background-position: 5px center;
}
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
.button:hover span:nth-child(1) {
bottom: 3px;
left: 20px;
}
/* PRESENTATION */
body {
background-color: black;
}
.button:nth-child(1) {
margin-right: 1em;
}
<a class="button" href="#" download="">
<span>Add Product</span>
<span>Add</span></a>
one way to do it is to hide the add product text.
i changed this..
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
to this..
.button span:nth-child(1) {
display:none;
transition: left .2s ease;
}
then on hover display inline
.button:hover span:nth-child(1) {
display:inline;
bottom: 3px;
}
checkout the codepen.
https://codepen.io/cartoonzzy/pen/PoGYowZ
This question already has an answer here:
How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery
(1 answer)
Closed 6 years ago.
I just created the css to display in a carousel / slider if the images pass the div but Im not able to create arrows next and back to play thumbs one by one
here is my full css and html without javascript code https://jsfiddle.net/vydxam3y/
I dont know what to use as javascript to complete this.
this is my css:
.thumbnail-slider {
position: relative;
overflow: hidden;
visibility: visible;
*zoom: 1
}
.thumbnail-slider ul{list-style:none;padding:0;margin:0;width:2000em}
.thumbnail-slider ul li {
float: left;
}
.thumbnail-slider .thumb+a {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.thumbnail-slider .arrow {
background: #000;
background: rgba(0, 0, 0, 0.5);
height: 50px;
opacity: 0;
padding: 0 10px;
position: absolute;
width: 50px;
z-index: 52;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out false;
-o-transition: opacity 0.2s ease-in-out false;
transition: opacity 0.2s ease-in-out
}
.thumbnail-slider .arrow.arrow-left:after,
.thumbnail-slider .arrow.arrow-right:after {
color: #fff;
display: block;
margin: 15px 0;
text-align: center
}
.thumbnail-slider .arrow.arrow-right {
right: 0px
}
.noTouch .thumbnail-slider:hover .arrow {
opacity: 1
}
.noTouch .thumbnail-slider ul {
position: absolute;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out false;
-o-transition: left 0.4s ease-in-out false;
transition: left 0.4s ease-in-out
}
.touch .thumbnail-slider {
-webkit-overflow-scrolling: touch;
overflow-x: auto
}
.touch .thumbnail-slider .arrow {
display: none !important
}
.thumbnail-slider .arrow:after {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.thumbnail-slider .arrow {
top: 42px
}
.thumbnail-slider .arrow:after {
font-size: 20px;
font-size: 2rem
}
.thumbnail-slider .arrow.arrow-left:after {
font-family: FontAwesome;
content: "\f095";
}
.thumbnail-slider .arrow.arrow-right:after {
font-family: FontAwesome;
content: "\f095";
}
.thumbnail-slider .video-tag-list img {
display: block
}
.thumbnail-slider .video-tag-list li.face {
margin-left: 5px;
height: 165px;
width: 113px
}
.thumbnail-slider .video-tag-list li.channel,
.thumbnail-slider .video-tag-list li.category {
margin-left: 5px;
height: 165px;
width: 180px
}
.thumbnail-slider .video-tag-list li:first-child {
margin-left: 0
}
.thumbnail-slider .video-tag-list li.category img,
.thumbnail-slider .video-tag-list li.face img,
.thumbnail-slider .video-tag-list li.channel img {
height: 134px
}
.thumbnail-slider .thumb {
display: block;
margin-bottom: 3px
}
.thumbnail-slider .thumb:before {
content: ""
}
.thumbnail-slider .name {
display: inline-block;
max-height: 30px;
max-width: 100%;
overflow: hidden;
word-wrap: break-word
}
.noTouch .video-tag-list li:hover .thumb:before,
.noTouch .video-tag-list li.active .thumb:before {
border-width: 3px
}
.noTouch .video-tag-list .thumb:before {
border: 0 solid #00b1ff;
bottom: 0;
left: 0;
outline: 1px solid #fff;
position: absolute;
right: 0;
top: 0;
z-index: 51;
-webkit-transition: border 0.15s ease-in-out;
-moz-transition: border 0.15s ease-in-out false;
-o-transition: border 0.15s ease-in-out false;
transition: border 0.15s ease-in-out
}
.noTouch .video-tag-list .thumb {
position: relative
}
should I use jquery? or its possible also with pure css?
I think this is what you are looking for.
http://getbootstrap.com/javascript/#carousel
Hey why not you adopt the owlcarousel for your thumbnail slider.
It's very easy to use...check out demos here:
http://www.owlgraphic.com/owlcarousel/#demo
There is space between the .navigation & .navpromo when viewed in opera or chrome browsers. I have tried several tips including making sure there are no spaces in the markup but I can't seem to figure out the solution to make this cross compatible
http://jsfiddle.net/b7kn5bcL/#&togetherjs=Dk6IRzq6Sf
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
CSS:
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
jQuery:
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>
I'm not sure of the technical terms as I haven't looked it up, but an element with margin spacing will extend out from the content box of its parent element unless either padding, or overflow is set.
A quick fix for this is to give #navpromo the overflow: hidden; property.
Sidenote: I love that menu icon animation! :D
I have a responsive navigation menu, it works as follows: when you resize the window the 'hamburger' (three lines) an icon appears. Clicking this icon makes the menu appear and the icon becomes an 'X' icon by transforming. Clicking the 'X' makes the menu disappear and the icon become three lines again.
It works perfectly in Safari and Firefox, however it doesn't in Chrome.
It makes the transformation of three lines to 'X' and viceversa but the menu never appears.
Why is that?
Here's the code:
HTML:
<nav>
<label for="show-menu" class="show-menu">
<button class="show-menu button-toggle-navigation">
<span>Toggle Navigation</span>
</button>
</label>
<input type="checkbox" id="show-menu" role="button">
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
[...]
<script type="text/javascript">
$('button').on('click', function() {
$(this).toggleClass('isActive');
});
</script>
CSS:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
float: right;
width: 0;
height: 0;
text-align: right;
display: none;
margin-right: 15%;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ ul{
border-top-color: black;
float: right;
text-align: center;
display: block;
padding-top: 15%;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.25em solid black;
border-top: 0.25em solid black;
font-size: 13px;
cursor: pointer;
height: 1.5em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.25em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.button-toggle-navigation span {
color: transparent;
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
Thanks a lot for your help!
P.S: If you could tell me a better way to do this responsive menu, I'd appreciate it! Thanks! :)
Sure!
This is how I solved the problem:
HTML
<nav>
<label for="show-menu"xs class="show-menu">
<button id="pull" class="show-menu button-toggle-navigation"></button>
</label>
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
JS
<script type="text/javascript">
var menu = $("nav ul");
$('#pull').on('click', function() {
$(this).toggleClass('isActive');
menu.slideToggle(200);
});
</script>
CSS
/*Style 'show menu' label button and hide it by default*/
.show-menu {
margin-top: 7%;
float: right;
display: block;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.16em solid black;
border-top: 0.16em solid black;
font-size: 1em;
cursor: pointer;
height: 1.2em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.16em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
if you non't hide your button with CSS, the code is working perfectly:
.show-menu {
float: right;
text-align: right;
margin-right: 15%;
}
http://jsfiddle.net/4towu13r/
better if you use the -webkit-, -moz, -o- transition prefixes to.
UPDATE:
explanation: somehow chrome unable to activate <button> inside the <label>, if you click only on <label> the checkbox is checked and do the job. Here is a jQuery workaround to do the job:
checkbox=$('input[role=button]');
checkbox.prop('checked', !checkbox.prop('checked'));
working code: http://jsfiddle.net/eapo/4towu13r/3/
The popup perfectly works in chrome but its not working in firefox
i have gave css: float:left; but its not getting fixed
Fiddle: http://jsfiddle.net/rajkumart08/s6hBG/21/
CSS:
a{
text-decoration: none;
color: inherit;
}
.openme {
display: inline-block;
color: #fff;
background-color: #333;
padding: 10px;
}
#menu{
position: absolute;
padding: 20px 0px 0px;
background: -webkit-canvas(menu_background) no-repeat;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
}
#menu a{
float:left;
margin: 7px;
padding: 10px 20px;
font-weight: bold;
font-size: 20px;
text-align: center;
border-radius: 5px;
background-image: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#fff), to(#edeff3));
background-image: -moz-linear-gradient(top, #fff, #edeff3);
}
.hide {
opacity: 0;
}
.show {
opacity: 1;
}
Add this to your CSS:
#moz_background
{
display:none;
}
And change this:
#menu{
position: absolute;
padding: 20px 0px 0px;
background: -webkit-canvas(menu_background) ;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
}
to:
#menu
{
position:absolute;
padding:20px 0px 0px;
background:-webkit-canvas(menu_background) no-repeat;
background:-moz-element(#moz_background) no-repeat;
-webkit-transition:opacity 300ms ease-out;
-moz-transition:opacity 300ms ease-out;
transition:opacity 300ms ease-out;
}
DEMO
This is because Chrome displays the canvas as a background of div#menu. In Firefox, a canvas element is actually created. Because the canvas element is displayed as a block, it appears below the a elements that precede it.