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.
Related
I am using bootstrap visibility classes as follows on my webpage:
<div class="hidden-sm">
<div id="lrg-div-A"></div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B"></div>
</div>
<div class="hidden-md">
<div id="lrg-div-C"></div>
</div>
The visibility classes work and are hidden in the viewport where required. But, when I look at the markup in the browser's developer tools, I still see the markup for the hidden divs. For example, on large screens, "lrg-div-B" is not seen in the viewport, but the markup is still seen in the HTML tab. Is there anyway to remove it from the markup as well, similar to what 'dispaly: none' does?
display: none doesn't remove it from the markup, but it does remove it from the document flow so that it doesn't take up space. You can remove a node with javascript using remove() or removeChild() but mind you can't get it back again (unless you store it and re-append it later).
console.log('Hidden node: ', document.querySelector('.hidden-sm'));
//Hidden node: <div class="hidden-sm">…</div>
console.log('Before remove(): ', document.getElementById('lrg-div-B'));
// Before remove(): <div id="lrg-div-B">large B</div>
document.getElementById('lrg-div-B').remove();
console.log('Removed node: ', document.getElementById('lrg-div-B'));
// Removed node: null
.hidden-sm {
display: none;
}
<div class="hidden-sm"> <!-- hidden but still in markup -->
<div id="lrg-div-A">large A</div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B">large B</div> <!-- removed from markup -->
</div>
<div class="hidden-md">
<div id="lrg-div-C">large C</div>
</div>
It is not supposed to remove the elements from markup. CSS handles how DOM looks not its structure. You need to use a bit of Javascript if you actually want to remove the DOM elements.
Trying to create a swipe to action list component.
<div class="list-container">
<div class="row">
<div class="content">
Some Content 1
</div>
<div class="action">
Delete Action
</div>
</div>
<div class="row">
<div class="content">
Some Content 2...
</div>
<div class="action">
Delete Action
</div>
</div>
</div>
Action div is absolutely positioned with z-index less than of content div.
Goal here to make content div overlap the absolutely positioned action div, without providing the background-color to content div. If user swipe the list, content div is translated in X direction, to show the action below it.
Link to sample https://stackblitz.com/edit/angular-xdgct9
Notice that second row's content doesn't uses any background color, because of which action is visible.
Are there any other ways to achieve this?
Edited your stackblitz. so that initially the action class is set to have display:none. After animating, the css property display is set to block
anim() {
requestAnimationFrame(() => {
this.value -= 1;
if (this.value > -50) {
this.anim();
(document.querySelector('.action') as HTMLElement).style.display = 'block'
}
});
and in your css
.action{
...
display:none;
}
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.
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/
Using CSS I am running into trouble getting a div later on the page to show up using the hover command over an img tag. I'm writing the page using Bootstrap 3 - Any idea why this may be a problem? The words in "hovershow" appear at the right spot on the page when they are not originally hiden using CSS which makes me think there's a problem with the command itself.
HTML
<div class="col-md-4 col-sm-4">
<img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>
CSS
.hovershow{
display:none;
}
#Email_Logo:hover .hovershow{
display: block;
}
That's definitely not how CSS works.
The following CSS implies there is an element .hovershow somewhere within #Email_Logo:
.#Email_Logo:hover .hovershow{
display: block;
}
And well... that's not the case. What you want can either be achieved by some easy Javascripting or a change in your HTML 'tree' and CSS.