As far as I know I can't directly change the opacity of a background image but using ::before and ::after doesn't seem to let my image show up. Am I doing it wrong?
HTML
flower window boxes
All of our products come in virtually any length up to 16 feet and two sizes. Our standard size boxes are designed to accommodate almost any flower. Our XL sizes are taller and deeper to provide more root space for plants making them the ideal sized window boxes for plants.
</div>
<div class="card-back">
<h2 class="click-here"><b>Visit Site</b></h2>
<div class="info">
<h2 class="info">Email:</h2>
<h2 class="info">Phone:</h2>
</div>
</div>
<!-- Content -->
<div class="all-content">
<h1>Contrary to popular belief</h1>
</div>
</li>
Current CSS
.content li:nth-child(1) .card-back{
background-image:url(../images/sponsor-imgs/Cellular%20PVC%20Columns-Kingston-1.jpg);
width: 100%;}
What I've tried
.backimg::after {
background-image:url(../images/backimg/wide.png);
opacity: 0.5;
}
.backimg::before{
background-image:url(../images/backimg/wide.png);
opacity: 0.5;
}
div::after {
opacity: 0.5;
}
On a side not i know i can simply make the images themselves transparent, but i feel like a code to do it much more useful in the long run. thanks in advance.
::before and ::after require a content property. You can set it to an empty string but it must be included.
In most cases you also need to define a display property and assign some dimensions to the element (unless you are using something like position: absolute; top: 0; bottom: 0; left: 0; right: 0; - in which case, you don't).
.backimg {
background: red;
}
.backimg::after {
content: "";
display: block;
width: 200px;
height: 200px;
background-image: url(http://placehold.it/200x200);
opacity: 0.5;
}
<div class="backimg"></div>
You are missing the .backimg class in your html.
Dont use double :: and add content and display properties to after. Also some dimensions wouldnt hourt (width,height)
.class:after{
Cintent:"";
Display:block; // change as you see fit
}
Related
I'm building a gauge which uses pure CSS. It has a background to clip the remainder of the progress colour from showing. I want to add another div on top which gives a text indication of the progress: "10%".
It seems like no matter what I do, I end up with the background clip covering my text.
I've got an example of the problem here:
https://svelte.technology/repl?version=1.60.3&gist=77e1b55c23e229dee8d45b5648610593
An extremely cut down version of my code, demonstrating the problem is as follows:
<div class="gauge-wrap">
<div class="gauge-core">
<div class="gauge-bg" style="background-color: #fff;">
<div class="gauge-bg-value">10 %</div>
</div>
<div class="gauge-cap" style="background-color: #000;"></div>
</div>
</div>
<script>
.gauge-bg-value {
position: relative;
color: #f0f;
top: 7px;
z-index: 6;
}
.gauge-wrap {
position:relative;
margin:0 0 20px;
}
.gauge-bg {
position: absolute;
width: 200px;
height: 200px;
border-radius:100px;
z-index:0;
}
.gauge-cap {
position: absolute;
top:16px;
left:16px;
width: 168px;
height: 168px;
z-index:5;
}
</script>
It seems like z-index: 0 is still on top of my text div (.gauge-bg-value), even though I've given it a higher index.
Update - Solution:
In building my example, I moved the text into the .gauge-cap div and now it sits on top. Perhaps it was that div covering it all along. Happy to hear solutions that don't modify the structure of the html though.
This is to do with stacking context. In a case like this...
<div class='foo'>
<div class='bar'></div>
</div>
<div class='baz'></div>
...if foo and baz both create stacking contexts, and baz has a higher z-index than foo, then bar can never appear above baz no matter what. You'll have to break your markup apart into different layers instead (though in your example, I think you'd have an easier time using SVG instead of HTML).
I have a page with a large products table. Each product is represented by an image.
I would like to make each product name searchable using the browser's "search in page" feature. When searching for a product name, the user should end up at the respective image.
I can not add a product name that is visible as text (the name is already very prominently on each image) but can add text elements that are not visible.
Is there a robust way to do this?
How about hiding some text behind the image? Something like this.
<div class="image-block">
<div class="img-description">Some text.</div>
<img>
</div>
.image-block {
position: relative;
}
.img-description {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.image-block img {
position: relative;
}
Basically, this will put the image over the img-description element, so you can still search and find it.
Using z-index, you can hide the text behind the image. This lets it be searched for with Chrome, Safari and Firefox (unfortunately can't test in IE).
<html>
<body>
<style>
.product-image {
position: relative;
width: 100px;
height: 100px;
display: block;
overflow: hidden;
}
img.product {
position:absolute;
height: 100px;
width: 100px;
}
div.product {
z-index: -1;
position: absolute;
}
</style>
<table>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">name 1</div></div></td></tr>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">something else...</div></div></td></tr>
<table>
</body>
</html>
It works well in FF & Chrome, however in Safari it pulls the text out from behind the image, which your users may find jarring.
The solutions here have the problem that the user can't tell they've found something, since the text they're searching for is hidden behind the image. If there's 12 images on screen, it's not obvious which one has matched their search.
I do something similar, but I just have transparent text above the image. <p style="color:transparent">My product title</p>.
That way when the browser scrolls to the right region, the user can also see a blue selection growing around the text as they type it.
(In Chrome at least, the "transparent" text becomes visible once it's selected)
I am making an application that uses a website as an interface.
The html look like the following:
setTimeout(function() {
$('#page-1').removeClass("show-me");
$('#page-2').addClass("show-me");
}, 1000);
setTimeout(function() {
$('#page-2').removeClass("show-me");
$('#page-3').addClass("show-me");
}, 2000);
div#main {
position: absolute;
min-width: 300px;
width: 100%;
height: 100%;
background-color: #ffa;
}
div#main > div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition-delay: 0s;
transition-duration: 200ms;
transition-property: "opacity,visibility";
transition-timing-function: ease;
}
#page-1 {
background-color: #00f;
}
#page-2 {
background-color: #0f0;
}
#page-3 {
background-color: #f00;
}
div#main > div.show-me {
opacity: 1;
visibility: visible;
}
<div id="main">
<div id="page-1" class="show-me">Page 1</div>
<div id="page-2">Page 2</div>
<div id="page-3">Page 3</div>
</div>
Each page contains data the same way as you would navigate to www.example.com/page-1, www.example.com/page-2 or www.example.com/page-3.
However I want to stay at www.example.com and navigate trough pages by fading them in and out.
I got them placed over one another with position: absolute;top:0;left:0; but this way main won't know the height of the page since it's content is absolute.
Therefore i'd like a way to make them fade in and out wiouth the use of position or negative margins (since the height of each page is dynamic due to content)
Or maybe you have another way of achieving this effect?
This is for an application, not a webpage that should be indexed by google or something else. So no SEO worries :)
EDIT:
Added a better example.
I would have to recomend jQuery Mobile library for this. It's pretty much what it was built for. I have been using it recently to make a custom app for our company and it's really quite good. Although a little bit tricky to pick up initially it's not as steep a learning curve as some other libraries I have used in the past.
(would have made this a comment, but I cant :-( )
Solved the problem by adding position: static; to the 'show-me' class.
This way the main knows the height of it's 'active' child!
When navigating first the active page class 'show-me' is removed, so it becomes position absolute again and starts to fade-out.
The next page gets the class 'show-me'.
Now becomes static so the main knows the new page's height and follows it.
And the new page fade's in as it should!
For a short moment (which you cannot see as far as I tested) the main div has no content and becomes small again. If it contains a background image you may see a little flicker but I think it's to fast for that so it shouldn't be noticeable.
In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here:
The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.
With:
#blueBox {
background-color: #FFD090;
opacity: 0.0;
}
If the msgContent is a child of blueBox:
<div id='msgBox'>
<div id='blueBox'>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
</div>
and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.
If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.
I've tried rgba (http://jsfiddle.net/mkasson/nJcxQ/19/) like here on SO, but it doesn't cover over the child elements.
Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.
Thanks!
Here is how I would go about this,
(What the problem is, you are using the parents background. You can't make the parents background go over it's content, that is not what a background does. It merely sites behind everything it is containing and acts as a background.)
html,
<div class="messageContent">
<span class="overlay"></span>
<p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
This is a link
</div>
css,
.messageContent {
color: #000;
position: relative;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background: lightBlue;
opacity: 0;
height: 100%;
width: 100%;
display: block;
z-index: 100;
}
.messageContent:hover .overlay {
opacity: 0.6;
}
What I am doing is placing an absolute span tag inside of the parent to act as the color overlay. When the parent is hovered the overlay child will become active by increasing it's opacity.
JSFIDDLE
Here's how I would do it.
<div id='msgBox'>
<div id='blueBox'>
</div>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
CSS
#blueBox {
background-color: #FFD090;
opacity: 0.0;
position: absolute;
top: 0;
left: 0;
}
jQuery
$("#msgBox").hover(function(){
$("#blueBox").css({top:$(this).css("top")}).height($(this).outerHeight()).width($(this).outerWidth()).animate({opacity:0.6});
},function(){
$("#blueBox").animate({opacity:0}).height(0).width(0);
});
http://jsfiddle.net/54cx7/2/
The problem is that since content is a child of bluebox, then it inherits the 0 opacity.
I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.
Working FIDDLE Demo
Consider that you want something like this:
We write our markup as simple as possible. One element for container, one element for our link and one another element for popup:
<!-- [container] -->
<div class="link-with-popup">
<!-- link -->
<div class="link">CSS</div>
<!-- [popup] -->
<div class="popup">
<div class="box">CSS Description</div>
</div>
<!-- [/popup] -->
</div>
<!-- [/container] -->
Here is our layer structure in picture:
CONTAINER
Let's write CSS for our container.
.link-with-popup {
/* for visualizing */
background: yellow;
/* we need relative, because childs are absolute */
position: relative;
margin-bottom: 10px;
height: 30px;
width: 400px;
}
[!] Note that we make our container relative. Because the children will be in absolute mode.
LINK
We create our link as an absolute element from left, just as shown in the figure above.
.link {
background: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 10;
}
POPUP
The dimention of popup element is same as the container, so we set all top, left, right, bottom properties to 0.
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
z-index: 20;
}
[!] Note that z-index of popup element must be greater than link element.
.popup {
/* we won't show the popup yet */
display: none;
}
By now, we'll get this result (check it on jsFiddle):
Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup? We have to get the next sibling element by the link. We use the + selector in CSS:
.link:active + .popup {
display: block;
}
See the result on jsFiddle. But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none).
So we set the :hover rule for the popup and make it block.
.popup:hover {
display: block;
}
Check the jsFiddle demo. Now we get close enough. The only issue that the popup element, hide our link.
But it doesn't matter, because we won't set background for our popup (it will be transparent).
TEXT
For wanted text in popup element, we set this rules:
.popup .box {
position: absolute;
/* note that we make a gap from left to don't hide the link */
left: 130px;
top: 0;
right: 0;
bottom: 0;
background: #505050;
}
Check the jsFiddle demo. Now we have all things that we need.
Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):
.popup {
background: transparent;
}
And here is the final jsFiddle result. And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.
Some important note to memorize:
In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup. It's a child of popup and our popup is an 100% width and height element on the container.
Working FIDDLE Demo
Another way is to use the :target property (only works in moderns browsers).
Here's a qucik DEMO where I've hidden the div by applying opacity: 0; and the when you click the link the div changes to opacity: 1; The link and the div are matched using a hash in the url.
Here's the code from my example.
HTML
Click me
<br />
<div id="pop"></div>
CSS
#pop {
width: 100px;
height: 100px;
background: #000;
opacity: 0;
}
#pop:target {
opacity: 1;
}
There are some side effects though. The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.
EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/