Good evening, thanks for trying to help first off.
I have a 'portfolio' page with 45 images of houses I've built. They're laid out in a grid, 5 wide 9 down. Simply, when you click and expand the image in browser, it works great. However, when I view on mobile, it get's a little fishy. The image tends to stretch past the view of the screen.
My question is: how can I make the image stay in the viewport of say my mobile device instead of stretching passed the screen? I tried absolutely positioning the overlay, that didn't work.
The lightbox script i'm using: http://tympanus.net/Tutorials/CSS3Lightbox/index3.html
My portfolio page: http://www.ocalaplastering.com/portfolio.html
This would be my html heavily reduced. Multiply the "li" element times 45 and that's basically the page.
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div content>
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="images/work/thumbs/1.jpg" alt="image01">
<span>Expand</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="images/work/full/1.jpg" alt="image01" />
<div>
Prev
Next
</div>
x Close
</div>
</li>
</ul>
</div>
</div>
</body>
As for the CSS, this is the styles for the aforementioned elements:
.lb-album{
width: 100%;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: left;
padding:0px;
padding-right:1px;
padding-bottom:1px;
position: relative;
list-style:none;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 3px;
background: #816445;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 3px;
left: 3px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
filter: alpha(opacity=80); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
margin-left: -30px;
background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(../images/arrows.png) no-repeat top right;
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
/*
100% Height for Opera as the max-height seems to be ignored, not optimal for large screens
http://bricss.net/post/11230266445/css-hack-to-target-opera
*/
x:-o-prefocus, .lb-overlay img {
height: 100%;
}
There isn't jQuery involved, so i'm assuming it will just be a very simple property to add, but I cannot figure it out.
Cheers for the help!
This can be solved with a simple addition to your CSS on line 355 (.lb-overlay img):
Add a max-width: 100%; below the max-height:100%;
Let me know if that makes it behave how you are expecting!
Related
body {
background-image: url("http://www.nozeens.com/wp-content/uploads/2014/11/White-Wallpaper-Pattern-Hd-Background-8-HD-Wallpapers.jpg");
}
.button {
margin-top: 100px;
position: relative;
background: -webkit-linear-gradient(left top, #FF6600, #FFCC00);
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 4s;
}
#-webkit-keyframes color-change {
0% {
background: -webkit-linear-gradient(left top, #005C66, #008A19);
}
25% {
background: -webkit-linear-gradient(left top, #CC66FF, #990099);
}
50% {
background: -webkit-linear-gradient(left top, #FF8C9E, #FFF2C7);
}
75% {
background: -webkit-linear-gradient(left top, #00A3C7, #00C7B5);
}
100% {
background: -webkit-linear-gradient(left top, #ABFF54, #75FF8A);
}
}
.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);
animation: color-change 4s ease infinite;
}
<button class="button button2">Hover Me For Fun</button>
I created this animated button with the animations i just learnt but I can't seem to position it i even tried putting margin-top but it didn't work. At first I thought that it was because of position so I changed it to relative but it is still not working. Any help would be highly appreciated. Thanks :-)
I have this basic switch toggle script which I found online and have implemented into my project. My sites background seems to be a bit too bright for the button to sit nicely without it being difficult too see, so my question is, how can I edit this switch toggle CSS code to make the it a little bit darker so I can use it on my site?
I'm only really worried about darkening the actual toggle button - that's the worst part and I have tried fiddling with the script but just cannot seem to find any part that changes the toggle?
Here is my JSfiddle
.container {
margin: 50px auto;
width: 280px;
text-align: center;
}
.container > .switch {
display: block;
margin: 12px auto;
}
.switch {
position: relative;
display: inline-block;
vertical-align: top;
width: 56px;
height: 20px;
padding: 3px;
background-color: #03C;
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
background-image: -o-linear-gradient(top, #eeeeee, white 25px);
background-image: linear-gradient(to bottom, #eeeeee, white 25px);
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #47a8d8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background: white;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-handle:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: #f9f9f9;
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eeeeee, white);
background-image: -moz-linear-gradient(top, #eeeeee, white);
background-image: -o-linear-gradient(top, #eeeeee, white);
background-image: linear-gradient(to bottom, #eeeeee, white);
}
.switch-input:checked ~ .switch-handle {
left: 40px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-green > .switch-input:checked ~ .switch-label {
background: #4fb845;
}
You need to change backgroud:#yourcolorcode of class.switch-label
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #000;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
Also if you want to change the color of the circle of the radio button update the .switch-handle and .switch-handle:before classes
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background: #000;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, #000 40%, #000);
background-image: -moz-linear-gradient(top, #000 40%, #000);
background-image: -o-linear-gradient(top, #000 40%, #000);
background-image: linear-gradient(to bottom, #000 40%, #000);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-handle:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: #000;
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eeeeee, #000);
background-image: -moz-linear-gradient(top, #eeeeee, #000);
background-image: -o-linear-gradient(top, #eeeeee, #000);
background-image: linear-gradient(to bottom, #eeeeee, #000);
}
I hope this is what you want https://jsfiddle.net/mam1yj1f/8/
add
.switch {
position: relative;
display: inline-block;
vertical-align: top;
width: 56px;
height: 20px;
padding: 3px;
background-color: #03C;
border-radius: 18px;
cursor: pointer;
background-color: black;
}
to your CSS style, jsfiddle
Just change the switch label color as follows:
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: magenta;
....
}
P.D. I used magenta color just for making the example
You want to edit the .switch-handle and .switch-handle:before.
This makes it darker, you just need to fiddle about the background colours to get what you want.
.switch-handle::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0px 0px -6px;
width: 12px;
height: 12px;
/* change these!*/background: #F9F9F9 linear-gradient(to bottom, #A8A8A8, #959595) repeat scroll 0% 0%;
border-radius: 6px;
box-shadow: 0px 1px rgba(0, 0, 0, 0.02) inset;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
/* change these!*/background: #FFF linear-gradient(to bottom, #CCC 40%, #F0F0F0) repeat scroll 0% 0%;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
transition: left 0.15s ease-out 0s;
}
I used the code below to create an effect on the folded corner button, but I can not avoid white background which is in the upper left corner of the button. That class could use to make this transparent part and thus show the yellow color, which is the background of the main DIV?
http://codepen.io/rsvaz83/pen/aORzBy
.back {
background: #fc0;
}
.button {
display: inline-block;
padding: 1em;
margin: 1em;
background-color: #007E9F;
text-decoration: none;
color: white;
}
.curl-top-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
left: 0;
/* IE9 */
background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
/*For IE7-8-9*/
z-index: 1000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
width: 40px;
height: 40px;
}
<div class="back">
BUTTON EFFECT
</div>
Just change the 1st white to #fc0 (the color of the background bar) in the line below.
background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
^^^^^
I also simplified the CSS slightly, merged transition rules, and remove that filter hack, it won't be able to get the effect you want on outdated IEs anyway, updated code snippet follows.
.back {
background: #fc0;
}
.button {
display: inline-block;
padding: 1em;
margin: 1em;
background-color: #007E9F;
text-decoration: none;
color: white;
}
.curl-top-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
left: 0;
z-index: 1000;
background: linear-gradient(135deg, #fc0 45%, #aaa 50%, #ccc 50%, #fff 80%);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
transition: 0.3s;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
width: 40px;
height: 40px;
}
<div class="back">
BUTTON EFFECT
</div>
Change the first value of the background to the yellow color.
background: transparent linear-gradient(135deg, #Fc0 45%, #AAA 50%, #CCC 56%, #FFF 80%) repeat scroll 0% 0%;
You can set the color of the folded corner in curl-top-left:before:
.curl-top-left:before {
[...]
background: linear-gradient(135deg, HERE 45%,
#aaaaaa 50%,
#cccccc 56%,
white 80%);
[...]
}
Just replace HERE with your desired color (such as #fc0 for example). You cannot use transparency here, since the folded corner is drawn on top of the button, so when you set it to transparent, you will always see the button under the folded corner.
You can change your background to a gradient.
and move it in sync with the efect of the pseudo element.
.back {
background: #fc0;
padding-left: 30px;
vertical-align: top;
padding-top: 20px;
padding-bottom: 20px;
}
.button {
display: inline-block;
padding: 1em;
margin: 0em -2em;
text-decoration: none;
color: white;
}
.curl-top-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
background-image: linear-gradient(135deg, transparent 30px, #007E9F 30px);
background-position: -20px -20px;
background-size: 200% 200%;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: background-position;
transition-property: background-position;
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
left: 0;
/* IE9 */
background: linear-gradient(135deg, transparent 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
/*For IE7-8-9*/
z-index: 1000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: inherit;
transition-duration: inherit;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
width: 40px;
height: 40px;
}
.curl-top-left:hover,
.curl-top-left:focus,
.curl-top-left:active {
background-position: 0px 0px;
}
<div class="back">HI!
BUTTON EFFECT
</div>
I am trying to get my template working and I have a test page so you can see the miss-hap.
http://merkd.com/gtamoney
The header disappears in the top right corner of the page, but the header border at the bottom of the header seems unaffected and runs the whole length of the page. My CSS is below; I placed the #header and #headerBorder at the top but I also included the rest of the CSS for all the objects in the header just in case it's relevant.
#headerBorder {
display: block;
position: fixed;
z-index: 99;
top: 3.0em;
width: 100%;
height: 0.5em;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
#header {
position: fixed;
width: 100%;
top: 0;
z-index: 100;
left: 0;
background-color: #FFFFFF;
height: 3.0em;
}
#header #logo {
position: fixed;
left: 3.0em;
top: 0.4em;
width: 7.25em;
height: 3.0em;
}
#header a {
display: block;
float: right;
height: 2.25em;
font-size: 0.9em;
text-decoration: none;
font-weight: 600;
color: #777777;
text-transform: uppercase;
letter-spacing: 0.01em;
margin: 0.15em 0 0 2.5em;
padding: 1.25em 0.5em 0.2em 0.5em;
transition: color 0.30s ease-in-out;
-o-transition: color 0.30s ease-in-out;
-moz-transition: color 0.30s ease-in-out;
-webkit-transition: color 0.30s ease-in-out;
} #header a:last-of-type { margin-left: 0; }
#header a:hover {
color: #000000;
}
#header div {
float: right;
margin: -0.1em 2.0em 0 0;
}
#header div a {
margin: 0;
}
#header div a img {
width: 1.5em;
height: 1.5em;
opacity: 0.6;
margin: 0;
}
#header div a:hover img {
opacity: 1.0;
transition: opacity 0.30s ease;
-o-transition: opacity 0.30s ease;
-moz-transition: opacity 0.30s ease;
-webkit-transition: opacity 0.30s ease;
}
Remove
#header { right: 10em; }
from alpha.header.css
CSS should looks like below
body {
background-color: #AAAAAA;
background-image: url("/engine/img/texture.png");
background-repeat: repeat;
margin: 0; }
#header {
background-color: #FFFFFF;
height: 3em;
min-width: 100%;
right: 10em;
top: 0;
z-index: 100; }
#headerBorder {
background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 0.5em;
top: 3em;
width: 100%;
z-index: 99; }
Note: Try not to use position:fixed.
Hi guys I have a pretty simple one:
How can I make before and after CSS properties (mainly used to make a DIV shape) disappear after a transition. I am working on a project for class and can't seem to figure it out.
The page is supposed to look like this:
http://ista230.com/images/assignments/7/page2.jpg
Heres what i have for CSS:
/* Navigation */
#nav{
margin-bottom:2%;
margin-top:0%;
width:100%;
background: #1d6287;
}
#nav ul {
padding: 100px 0 0; /* Remove default but add 40px to top */
margin: 0; /* Remove default */
list-style: none;
width: 100%;
overflow: hidden; /* So it 'contains' the floated <li> elements */
}
#nav ul li {
text-align:center;
float: left;
min-height: 50px;
width: 20%; /* 6 items means 20% each */
position: relative;
}
#nav a {
text-decoration:none;
color:black;
display: block;
width: 100%; /* 100% of <li> */
position: absolute;
bottom: 0;
left: 0;
}
div.navItem {
padding: 4% 4%;
position: relative;
background: #D54D25;
border: 2px solid #D54D25;
}
/* For little dumb triangle */
div.navItem:after, div.navItem:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 1px;
width: 1px;
position: absolute;
pointer-events: none;
}
div.navItem:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #D54D25;
border-width: 10px;
left: 50%;
margin-left: -30px;
}
div.navItem:before {
border-color: rgba(213, 77, 37, 0);
border-bottom-color: #D54D25;
border-width: 26px;
left: 40%;
margin-left: -26px;
}
div.navItem{
-moz-transition: height .5s ease; /* Firefox 4 */
-webkit-transition: height .5s ease; /* Safari and Chrome */
-o-transition: height .5s ease; /* Opera */
-ms-transition: height .5s ease; /* IE9 (maybe) */
transition:height .5s ease;
}
.navItem:hover
{
background: #999; /* Old browsers */
color:white;
border:none;
background: #999;
background-image: url("../images/logo.png") no-repeat center; /* fallback */
background: url("../images/logo.png") no-repeat center, -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
background: url("../images/logo.png")no-repeat center, -webkit-linear-gradient(top, #999, #FEFEFE); /* Chrome 10+, Saf5.1+ */
background: url("../images/logo.png")no-repeat center, -moz-linear-gradient(top, #999, #FEFEFE); /* FF3.6+ */
background: url("../images/logo.png")no-repeat center, -ms-linear-gradient(top, #999, #FEFEFE); /* IE10 */
background: url("../images/logo.png")no-repeat center, -o-linear-gradient(top, #999, #FEFEFE); /* Opera 11.10+ */
background: url("../images/logo.png")no-repeat center, linear-gradient(top, #999, #FEFEFE); /* W3C */
height: 130px;
}
And the HTML:
<nav id="nav">
<ul>
<li><div class="navItem">Home</div></li>
<li><div class="navItem">Upcoming Flights</div></li>
<li><div class="navItem">About Us</div></li>
<li><div class="navItem">Travel Guide</div></li>
<li><div class="navItem">Contact Us!</div></li>
</ul>
</nav>
if you want to disappear up arrow, after hovering menu item you can use this selector:
div.navItem:hover:before{
opacity:0;
}
this selector works for your code. I made some change in your code you can see it here: jsFiddle
You can use jQuery to listen to transition end
jQuery(".navItem").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
your function here;
});
See demo here http://jsfiddle.net/Godinall/Aq2SB/