I'm working on this website template and I keep running into issues. My biggest one right now is that when the fixed header goes over the content boxes, the semi-transparent boxes overlap the header until the user hovers over the box and causes it to return to an opacity of 1. I'm not sure why it does this and I'm really desperate to get this fixed. Any help is appreciated.
Here's a snippet relating to my content boxes:
#wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
transition: .25s;
opacity: 0.5;
}
#wrapper:hover {
width: 960px;
margin: 0 auto;
text-align: left;
opacity: 1;
}
And here's the full fiddle: http://jsfiddle.net/rkgy5zvz/
#nav {
position: fixed;
background-color: #222;
opacity: 1;
width: 100%;
top: 0;
z-index: 99999;
}
Just add the z-index property with the proper number. Here the JSfiddle
Related
I have a fixed nav bar running the length of my website, but just now it currently has it's own scrollbar, so when i scroll on the body of the website, the navbar is static, and will only scroll if i physically scroll over the navbar itself.
Is this just the outcome of 'position: fixed;' or am i missing something in my CSS?
body {
margin: 0;
padding: 0;
color: #555;
font: normal 1.3em Arial,Helvetica,sans-serif;
background-color: #FAFAF0;
font-family: "proxima-nova",sans-serif;
display: block;
}
/*NAVBAR*/
#sidebar-wrapper {
position: fixed;
background: #2C4649;
z-index: 1000;
left: 0px;
height: 100%;
margin-left: 0px;
border: none;
display: block;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*PAGE CONTENT TO THE RIGHT OF NAVBAR*/
#page-content-wrapper {
margin-top: 20px;
overflow: hidden;
margin-left: 130px;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow-y: auto;
}
Does anyone know how to fix this so the full height of the website is dependant on either the navbar content or page content - rather than being separate scrollable items?
Thanks
Not exactly sure what you're after, but here's an example fiddle.
All I did was this rule: #sidebar-wrapper{overflow-y:hidden;} which will remove any scrollbar in the fixed element. This means that if there is too much content in the navbar, it will be cut off and not visisble (hence "hidden"). If you are already experiencing a scrollbar in the fixed nav bar, it means you have too much content in it, so this might not be the best solution for you.
Then I added a fixed width of the sidebar to match the margin offset of your content.
Here's the page upon which I'm working.
I'm using Shortcodes Ultimate to get the columns, and it's responsive. Now I'm trying to get a text hover with background over the images, preferably without JS for now. I can get it to hover perfectly if it's given defined height and width, but then that's not responsive.
On CodePen, it shows the title going all the way across the page, but the Shortcodes Ultimate columns eliminate that. But it probably isn't best design, either.
I've followed about 20 different tutorials to get where I am, but am stuck now.
CodePen
HTML:
<div id="portfolio_hover_wrapper">
<a href="#" class="wistia-popover">
<img src="https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360" alt="" class="hover" />
<span class="portfolio-hover-text"><span>ADO Rowing</span>
</a>
</div>
CSS:
#portfolio_hover_wrapper {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#portfolio_hover_wrapper a {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: table;
font-size: 3em;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#portfolio_hover_wrapper a:hover span.portfolio-hover-text {
opacity: 1;
}
span.portfolio-hover-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
If I understand what you want try using top: 50%; transform: translateY(-50%); in .portfolio-hover-text.
My bad I misunderstood your question, try adding the following:
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: block;
font-size: 3em;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.portfolio-hover-text span{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
white-space: nowrap;
}
In order to overlay text over an image I like to set the parent DIV to have the image as a background and child the text to it like such
<div class="box image1">
<div class="overlay fade">
<span class="text">ADO Rowing</span>
</div>
</div>
CSS
.box {
width: 75%; /*To make it responsive*/
height: 40em;/*Height should be fixed*/
box-shadow: inset 0px 2px 7px 0 rgba(0, 0, 0, .6);/*just for looks*/
margin: 5% auto 0 auto; /*Centers the div*/
border-radius: 5px; /*just for looks*/
overflow: hidden; /*Needed if our text overflows*/
}
.image1 {
background: url(https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360);/*Image*/
background-size: cover;/*Makes the background look responsive*/
background-position:center;/*for looks*/
}
Now we need to style the overlay. More CSS
.overlay {
background: rgba(33, 150, 243, .6);/*Overlay color*/
text-align: center;
padding: 1em 0 1em 0;/*adjust this if you want it cover the entire img*/
height:25%;/*Change this to 100% for whole image*/
opacity: 0;
margin: 25% 0 0 0;/*Moves the banner down*/
box-shadow: 0 2px 7px rgba(33, 150, 243, .4);
}
.text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
}
Padding will increase the div size and thus increase the color size, while margin will just space the div out without changing the size of the background, so I use margin to position and padding for sizing.
lastly we need to make some snappy animation on :hover
.fade {
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.box:hover .fade {
opacity:1;
}
That will change the opacity from 0 to 1 on hover with a .25s tranisition. That should be about it, hope that helps. View the CodePen Here
I am looking for a solution to create an image hover effect and keeping the image same height as widht at the same time. Here is my code right now:
.kozossegitag {
content: "";
display: block;
width: 100%;
padding-top: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden
}
.reszletek {
width: 100%;
padding-top: 100;
background-color: rgba(67,85,103,0.7);
opacity: 0;
}
.kozossegitag:hover .reszletek {
background-color: rgba(67,85,103,0.5);
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
<div class="kozossegitag">
<div class="reszletek">
<span>Koren Miklós</span>
</div>
</div>
My goal is to cover the whole image with this pastel blue color and place the text right on the image. As you see here (the left one is without hover, the right one is with):
Many thanks for every help!
Cheers,
Pepe
Add this to your css:
.kozossegitag:hover{
background-color: lightblue;
background-blend-mode: multiply;
}
Here is the JSFiddle demo
It's not overly neat, as it's a little rushed but you get the idea. I used position absolute and some pseudo elements to create what I think you're trying to achieve.
CSS:
.kozossegitag {
display: block;
width: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden;
position: relative;
}
/* give the div the ratio height */
.kozossegitag::after {
content: "";
padding-top: 100%;
display: block;
}
.reszletek {
width: 100%;
opacity: 0;
}
.kozossegitag:hover .reszletek {
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
z-index: 10;
position: relative;
}
/* overlay the light blue using ::before */
.kozossegitag:hover::before {
content: "";
background-color: rgba(67, 85, 103, 0.7);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
Working example.
By positioning .kozossegitag relatively, you can position .reszletek absolutely right over top of it by setting width and height to 100% and top and left to 0.
You also forgot to set height to 0 on .kozossegitag to keep it square;
.kozossegitag {
height:0;
position:relative;
content: "";
display: block;
width: 100%;
padding-top: 100%;
background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
background-size: cover;
overflow: hidden
}
.reszletek {
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-color: rgba(67,85,103,0.7);
opacity: 0;
}
.kozossegitag:hover .reszletek {
background-color: rgba(67,85,103,0.5);
opacity: 1;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
Fiddle: http://jsfiddle.net/trex005/rpafw24q/
I was trying to implement splitting of entire content to create a slideshow. Something similar to this.
http://tympanus.net/Tutorials/FullscreenSlitSlider/
The problem is splitting of divisions equally. I just don't want them to appear to be split but actually split with the first div containing all content but only top 50% height of actual content, and second div containing all content but having only bottom 50% height of original div.
Here's what I have so far.
.container {
position: absolute;
width: 100%;
height: 20%;
}
.slide1, .slide2 {
width: 100px;
height: 50%;
/*height: 100%;*/
overflow: hidden;
position: absolute;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Here's a fiddle link.
UPDATE: This is what I want the end result to look like. This is just a quick hack that appears as though second div is split.
If you just viewed source in the demo site you supplied, you might have seen this bit of code:
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
And if you googled jquery slitslider, the first link you get is FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3
Do you looking for this..
.container {
position: absolute;
width: 100%;
height: 100%;
}
.slide1, .slide2 {
width: 100px;
height: 100px;
overflow: hidden;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Fiddle: http://jsfiddle.net/6Kz7c/3/
EDIT:
Fiddle: http://jsfiddle.net/6Kz7c/5/
This uses a jquery plugin call FULLSCREEN SLIT SLIDER
So You no need to implement it from the sketch.
Here you can find a tutorial how to use that and download the library.
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
Edit:
css
* {
margin: 0;
padding: 0;
}
body {
background: #222;
}
.reveal {
width: 300px;
height: 300px;
margin: 50px;
float: left;
}
.curve {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 150px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -225px, #f6d9ad;
background-repeat: no-repeat;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.curve:hover {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 210px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -285px, #f6d9ad;
background-repeat: no-repeat;
}
.reveal p {
font: 45px/300px Helvetica, Arial, sans-serif;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal:hover p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
}
html
<div class="reveal curve">
<p>lorem</p>
</div>
Fiddle is here
The same principle as that of vertical splitting can be used for horizontal as well. The HTML layout had to be modified a bit to get it working.
HTML
<div class="container">
<div class="slide-wrapper">
<div class="slide1">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
<div class="slide2">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
</div>
</div>
Here's a working fiddle.
http://jsfiddle.net/6Kz7c/8/
I'm trying to apply a hover state to some portfolio navigation. It's a horizontally and vertically centered header on top of an image. The centering works as I need it to (there are reasons for it being as complicated as it is, or believe me, I would do it some other way).
But the hover state is giving me problems. I'm trying to do something like this: http://jsfiddle.net/kmjRu/33/. Which is a transition of the h2 and its background on hover of the image. I can get it almost working by fiddling with opacity or the z-index of the h2, but especially the change of the background color is not working (because there are no elements exactly covering the image, of which I can change the background). Does anyone know how to get the hover state working properly?
This is the code I have and on which I'm trying to get this hover effect to work:
(Also posted here: http://jsfiddle.net/kmjRu/34/)
HTML
<article>
<div class="img-crop">
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</div>
</article>
CSS
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
article {
overflow: hidden;
}
.img-crop {
display: inline-block;
position: relative;
overflow: hidden;
max-width: 100%;
}
h2 {
margin: 0;
padding: 0;
z-index: 1;
line-height: 0;
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
}
h2 {
margin: 0;
padding: 0;
z-index: 1;
line-height: 0;
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
h2:hover {
opacity: 1;
}
This could be it!
Basically, you need to make sure following things.
your h2 should be exactly equal to the container behind, only then it will perform a total overlay.
set the default opacity of h2 to be 0. and change/transition it to some mid value say 0.6 upon hover.
now also, you need to make the background-color of the h2 black, or different than the parent container, only then it will appear.
and then give appropriate padding to the h2 element, to make the text appear in the middle.
set h2 like this:
h2 {
margin: 0;
z-index: 1;
padding-top:20%;
line-height: 0;
position: absolute;
top: 0%;
left: 0;
width: 100%;
text-align: center;
vertical-align:middle;
height:100%;
opacity:0;
}
and set your h2:hover like this:
h2:hover
{
padding-top:20%;
color:white;
background-color:Black;
opacity:0.6;
-webkit-transition: opacity 0.25s, background-color 0.25s;
-o-transition: opacity 0.25s, background-color 0.25s;
-moz-transition: opacity 0.25s, background-color 0.25s;
-ms-transition: opacity 0.25s, background-color 0.25s;
-kthtml-transition: opacity 0.25s, background-color 0.25s;
transition: opacity 0.25s, background-color 0.25s;
}
see this fiddle
So, I solved the question by doing it like this:
HTML
<article>
<div class="item">
<h2>Title</h2>
<img src="http://placehold.it/350x150" />
</div>
</article>
CSS
article {
overflow: hidden;
}
h2 {
font-weight: normal;
z-index: 2;
line-height: 0;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
left: 0;
margin: 0;
padding: 0;
color: rgba(255,255,255,0);
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.title {
display: inline-block;
position: absolute;
overflow: hidden;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
text-decoration: none;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.title:hover {
text-decoration: none;
}
.item {
display: inline-block;
position: relative;
max-width: 100%;
}
.item:hover .title {
background: rgba(0,0,0,0.6);
}
.item:hover h2 {
color: rgba(255,255,255,1);
}
img {
border: 0;
vertical-align: top;
max-width: 100%;
}
See this fiddle. That way it's dynamic (the image is fluid and there are no fixed heights or widths to it) and the headline is automatically centered vertically and horizontally.