Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Here is the jsfiddle:
http://jsfiddle.net/txj54fL9/
Codes pasted below:
.cover {
background: linear-gradient(to bottom, rgb(0,0,255,0.5), rgb(238,130,238,0.5));
background: -webkit-linear-gradient(top, rgb(0,0,255,0.5), rgb(238,130,238,0.5));
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 99999;
position: absolute;
}
<h2> I'm bottom</h2>
<div class="cover"></div>
As can be seen in the demo, the cover doesn't display at all. If I change the rgb(0,0,255,0.5) to rgb(0,0,255), the cover can show, but it loses the transparency..
Does anyone have ideas about how to keep transparency as well as gradient?
Use RGBA instead
.cover {
background: linear-gradient(to bottom, rgba(0,0,255,0.5), rgba(238,130,238,0.5));
background: -webkit-linear-gradient(top, rgba(0,0,255,0.5), rgba(238,130,238,0.5));
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 99999;
position: absolute;
}
http://jsfiddle.net/txj54fL9/1/
Pikamander2's answer's the solution, and remember, you can still use opacity:0.5; for any element.
Take a look here
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Can't get rid of this line anyway , here's the domain , please switch to browser mobile mode to open it . http://www.pocketsaver.co/index.php?route=mobile/home
You have a rogue h4 element floating over the top of your content.
.hotlists h4:before {
background-image: linear-gradient(to right, #ffffff 16%, #ababab 53%, #ffffff 83%);
content: "";
height: 1px;
position: absolute;
right: 0;
top: 50%;
width: 100%;
}
I'm not sure the result you were expecting but if you remove position, right and top it will sort itself into the DOM with everything else and stop floating over your content.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I've been searching about the name of this image effect but can't find an answer since I don't really know what to put on the search engine. So I decided to visit here to post a question to you guys hoping that I get an answer. Here is the image effect
That effect is called a gradient, someone overlaid a semi-transparent gradient on top of an image.
You can do that with HTML/CSS.
Gradients in CSS
You'll need to check this out to get the gradients to be transparent though
The HTML would look something like this:
<div id="container>
<img src="path/to/img.jpg">
<div id="gradient"/>
</div>
And an example of what your CSS might look like could be:
#container {
position: relative;
}
#container img {
width: 100%;
}
#gradient {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* note: this CSS has gradients but to make them transparent check out the link I sent above */
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}
You can also do it simply in photoshop, by using your image as a background layer, and putting another layer on top, then making a gradient on top of the image and setting the opacity to be 70% or so. Hope this helps!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have this transition issue with a circle container set to overflow:hiddenand an image in it set to scale up on hover with a css transition: all 1s ease.
It's not working correctly in Web-kit browsers (i tested in Chrome and Opera)
the problem seems that while the scaling is preforms the parent container's overflow:hidden takes a break and snaps back when the transition is over, this however only effects the image's border-radius and the original form of the image (the box) is reveled for as long as it takes to get the scaling done.
In other browser it works fine. (FF, Edg, IE)
See sample here:
https://jsfiddle.net/s7qeb4rL/13/
Is this a Web-Kit bug or is it just the way images are rendered in web-kit for the long haul.
try this code...
.circle{
float:left;
width:19vw;
height:19vw;
border-radius:50%;
overflow:hidden;
margin:2.2vw;
display:block;
position: relative;
border:10px solid rgb(96, 67, 58);
}
.contain-pic-nyn{
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
overflow:hidden;
transition: all 1s ease;
}
.contain-pic-nyn img{
width: 100%;
height: 100%;
}
.circle:hover .contain-pic-nyn{
overflow:hidden;
right: -20px;
left: -20px;
top: -20px;
bottom: -20px;
transition: all 1s ease;
}
<body>
<div class="circle">
<div class="contain-pic-nyn">
<img src="http://lorempixel.com/400/400/sports/" alt="picture"width="100%" height="100%">
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I was recently thinking about potentially interesting interface design ideas, and one idea that came to mind was a kind of futuristic looking box-based design in which elements would have thin and semi-transparent border lines with small opaque boxes at the corners.
The problem with that for me was thinking of a pure CSS solution for it because I didn't want to add any additional tags in the HTML, and through CSS I thought it would work with pseudo-classes but one element would only be able to have two (with :before and :after)
I'm grateful for any helpful ideas on how one could achieve such a design using only CSS if it's even possible. Thank you in advance.
I added an Image from the Movie "Oblivion". That is roughly how I imagined it.
Probably the best description is the part around "Tour Code_"
I know #c-smile has already answered your question, but you can achieve this without images using only CSS. Like so:
body{
background-color:black;
}
.dots {
width: 200px;
height: 200px;
background-color: transparent;
position: absolute;
left: 20px;
margin:10px;
border: solid 1px rgba(255, 255, 255, 0.5);
}
.dots:before, .dots:after {
content: "";
position: absolute;
top:-5px;
height: calc(100% + 10px);
width: 10px;
background-image: linear-gradient(rgba(255, 255, 255, 1) 5px, rgba(255, 255, 255, 1) 5px),linear-gradient(rgba(255, 255, 255, 1) 5px, rgba(255, 255, 255, 1) 5px);
background-size: 10px 10px;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.dots:before {
left: -5px;
}
.dots:after {
right: -5px;
}
<div class="dots"></div>
Granted it uses gradients so you may need to be careful with browser compatibility, but it's pure css as requested.
Check CSS border images samples here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I want to add a background ribbon inside a div without images with only pure CSS.
I tried using :after and :before but didn't have any luck.
The ribbon is green, and must be same as below:
http://i.stack.imgur.com/eJsj9.png
Anyone here that can help me? Remember - my div can grow in height with the content.
I applied some transforms on the :after pseudo-element. Here's how:
.ribbon {
background: #04F;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.ribbon:after {
content:' ';
position: absolute;
background: #0F4;
width: inherit;
height: inherit;
padding: inherit;
top: 0;
right: -70%;
-webkit-transform: skew(-15deg, 0deg);
-moz-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
}
Just work with the padding, text-align and colors to achieve the exact effect.