I'm trying to apply an overlay to create an effect similar to https://fancy.com when the login or signup link is clicked i.e the background should be dimmed.
The problem is that my nav bar and content boxes are not subjected to the overlay for some reason but not sure why?
I have created a fiddle to explain: https://jsfiddle.net/p861yfLp/1/
My Code:
<body>
<div class="overlay">
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</div>
</body>
Change these files
CSS - set the position to absolute
.overlay {
position: absolute;
}
EDIT: Following #DaniP answer the changes to the css are not required if you want a 'modal' feel for the overlay. Tho if you want to overlay everything I would recommend using the absolute position.
HTML - no need to make your overlay contain all other html
<body>
<div class="overlay"></div>
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</body>
Now your overlay will 'overlay'.
The half-black background-color is actually applied, but the nav (as child-element) has its own background-color (#FFF) defined. If you remove its background-color, it works:
.nav {
background-color: transparent;
}
https://jsfiddle.net/rw60gzbz/
Related
I have created a Bootstrap carousel, and I am using custom css to define a background image for each of the three slides. For some reason, the background image is not appearing on the first slide, although the background images for slides 2 and 3 are appearing ok. I can't work out what is wrong. I think it may be something to do with the active class being applied just to the first slide?? Here is the HTML and CSS for the first slide, the carousel is called myCarousel, thanks:
HTML:
<!-- class item means item in carousel -->
<div id="slide1" class="item active">
<!--
<img src="http://placehold.it/1200x500">
-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
CSS:
#myCarousel .item { height: 400px; }
<!-- top left is the background position of the image, no repeat because we don't want the background image repeating -->
#slide1 {
background: url('images/carousel_medium_01.jpg') top center no- repeat;
}
Instead of putting your code directly on the <div class="item"> I suggest to make a nested div (replacing the image) and apply a height, width and background-image properties there instead. Like this:
HTML
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="item-custom first"></div>
</div>
<div class="item">
<div class="item-custom second"></div>
</div>
<div class="item active">
<div class="item-custom third"></div>
</div>
</div>
CSS
.item-custom {
height: 100%;
width: 100%;
}
Then for your .first, .second, and .third classes you can add the background-images you want. That should get you going in the right direction. Hope that helps.
The code above is loading the placeholder background image, but it is only visible behind the h1 element due to the lack of the parent #myCarousel div.
The CSS is looking for the parent div on which to apply the explicit height and width.
Try adding the parent div:
<!-- class item means item in carousel -->
<div id="myCarousel">
<div id="slide1" class="item active">
<!--<img src="http://placehold.it/1200x500">-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
</div>
This allows your height/width properties to be applied, and for the background image to display.
Along with crazymatt's suggestion to organize the nested elements a bit more, you can use the background-size and background-position rules to display the image as needed for each individual slide.
jsfiddle example
I have found the solution by ammending the media queries that the site was using. What I had to do was make sure that I had an explicit media query rule to cover all potential screen widths. In the media queries, I specified the background images for the carousel slides. By doing this, I found I always had the background images correctly populated. Previously, for a certain range of screen sizes, I was just letting default CSS define the background images, and this meant the background image for the first slide didn't show. I guess adding media queries for all possible screen sizes meant there was always a "trigger" to populate the background images.
Thanks also to those who offered a reply.
When you hover over the icon images the background color turns black. How do I change this to grey?
<h2>Contact Us Anytime!</h2>
</div>
</div> </div></section>
<section class="container"><div class="row">
<div class="spb_content_element col-sm-6 column_container">
<div class="spb-asset-content">
<section class="container"><div class="row">
<div class="spb_icon_box col-sm-12">
<div class="spb-asset-content">
<div class="sf-icon-box sf-icon-box-left-icon sf-animation sf-icon- " data-animation="none" data-delay="0" style="background-color:;"><div class="sf-icon-cont cont-small sf-icon-float-none"><i class="fa-map-marker sf-icon sf-icon-small" style="color:;"></i></div><div class="sf-icon-box-content-wrap clearfix"><h3 style="color:;"></h3><div class="sf-icon-box-content" style="color:;">
<p> CT</p>
</div></div></div>
</div>
</div> </div></section>
Change:
.sf-hover .sf-icon-cont, .sf-hover .sf-icon-box-hr {
background-color: #222!important;
}
To:
.sf-hover .sf-icon-cont, .sf-hover .sf-icon-box-hr {
background-color: #8C8C8C!important;
}
How to scrutinize CSS like a pro
1) Right click on the HTML element -> Inspect element
2) Right click on the specific DOM -> Force element state -> :hover
3) * Play with the CSS on the right panel at real-time until you are satisfied.
When life gets complicated
Sometimes a sophisticated programmer decides to change the CSS on the fly using Javascript. So the second step won't help. To solve this issue you can hover the desired element and witness the DOM is being changed. I saw the DOM is being fulfilled with the sf-hover class so I added this class manually. That's how I was able to play with the CSS on the right side.
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
I have a div that has a link in it, right now if I hover over the link it chnages color, but I want to hover over the div aswell to chnage the color, here is the code:
<div class="first_product margin_right left">
<a href="/link">
</a><div class="first_product_text">Automation <span>+</span></div>
</div>
I'm all for using Jquery, but if you want to avoid it
HTML:
<div class="first_product margin_right left">
<div class="first_product_text">
Automation <span>+</span>
</div>
</div>
CSS:
.first_product_text:hover{background-color:#f22;}
heres the JsFiddle
This should solve your problem.
CSS:
.first_product_text div:hover a {color:#HOVERCOLOUR;}
I have following webpage:
<div id = "wrapper">
<div id="leftmenu>
...
</div>
<div id="search">
...
</div>
<div class="Container">
<div id="content">
<iframe id="iF" name="if" src=""></iframe>
</div>
</div>
</div>
It bascially shows the menu in the left search bar on top and iframe with content below search bar and next to the menus. Problem i am having is i dont want it to show vertical and horizontal scrollbars inside ifram but rather use browsers scrollbars.
if i set like this in css:
.Container
{
position:absolute;
width:100%;
height:100%;
left:180px;
}
It removes horizontal scrollbar but is not removing vertical scrollbar. Can anyone guide me how to remove this vertical scrollbar from iframe.
Try: overflow: hidden; on your iframe.
#content iframe {
overflow: hidden;
}
Try this... After the iframe loads it resizes it using javascript. It'll only work if the iframe src is of the same domain.
<div id = "wrapper">
<div id="leftmenu>
</div>
<div id="search" >
</div>
<div class="Container">
<div id="content">
<iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
</div>
</div>
</div>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
There should be a scrolling attribute for the iframe you can just set to no, that takes care of the scrolling.
The iframe doesn't know it needs to be larger than the page it is in. If you know the height of the page you are attempting to show in the iframe, you can set the iframe height accordingly.
That being said, if the page you are displaying may change in size, your maintenance makes this pointless.
Charlie Frank's answer is good for same domain applications.