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 1 year ago.
Improve this question
I'm looking for a way to gradient images from the bottom to top
initial vs
goal
Images run in slick slider. I've already tried with radiant gradient but without any useful results.
It is not blur, it is linear gradient from black to transparent. You can use some element or pseudoelement (after/before) to place it over image and give it linear-gradient.
Something like this:
.my-cool-item {
position: relative;
display: inline-block;
}
.my-cool-item:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 300px;
background: linear-gradient(180deg, rgba(0,0,0,0), black);
}
<div class="my-cool-item">
<img src="https://i.stack.imgur.com/IuWLZ.jpg"/>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I wanna adjust this hover style that I have attached below.
https://clay.global/
In the footer of this website, when you hover on items, you can see a half-background and pink color on it. I appreciate it if you can help me and say what CSS style shall I use.Thanks
https://clay.global/
A simple way to highlight just the bottom half of an element is to set a background image linear-gradient with the top half transparent and the bottom half some color.
For example:
button:hover {
background-image: linear-gradient(transparent 0 50%, pink 50% 100%);
}
<button>business set</button>
For an HTML like:
<p>Text to highlight</p>
CSS could be sth like:
p {
position: relative; /*must be relative or absolute */
display: inline; /* must be inline for ::after to be the same width as p */
}
p::after {
background: pink;
content: ""; /* content must be here for it to show up*/
position: absolute; /*must be absolute to be positionied over p*/
z-index: -1; /* put it behind the text*/
width: 104%; /* set the highgligth a bit thicker*/
left: -2%; /* set the highlight left proporcionally to the width*/
bottom: -4%; /* set the position offset respect to the text*/
height: 0.5em; /* set the height difference respect to the text*/
}
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 6 years ago.
Improve this question
How to create a responsive square container in which to place elements?
You use viewport units
div {
width: 40vw;
height: 40vw;
background: black url(http://www.lorempixel.com/500/500/nature) center no-repeat;
background-size: contain;
}
<div>
</div>
Or percent
html, body {
height: 100%;
}
div {
width: 40%;
height: 40%;
background: black url(http://www.lorempixel.com/500/500/nature) center no-repeat;
background-size: contain;
}
<div>
</div>
And here is a post showing an aspect ratio solution: Maintain the aspect ratio of a div with CSS
You currently can't assign the same width to a html element as the height if you use %-s. You need to use javascript
var element = document.getElementById("your-element");
element.style.height = element.style.width;
//Note: you need to put after the style tags or you need to make it load after fhe document has been loaded
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Is it possible with CSS to apply a background-color and a background-image in one div at the same time?
I want it like this. Half image, half color. Ignore the blur effect, I don't need that:
The reason why I want this is because I have to apply an adjustment-layer on it all the time to get this effect.
Background color will only apply to the transparent parts of the background image (if both are set on an element).
You could create a pseudo element though with :before or :after and use that for the color layer.
(if you want to put content inside the element, you should use the pseudo element for the background image)
.background {
position: relative;
background-color: rgba(200, 50, 50, 0.5);
width: 500px;
height: 400px;
color:#fff;
}
.background:before {
content:'';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:url('http://lorempixel.com/500/400/cats/1') 0 0 no-repeat;
z-index:-1;
}
<div class="background">
content here..
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hi I have a test page up here http://blueanchorcreative.com/
There is a little tiny gap between the slider and the header and I can't figure out what it is? I tried applying overflow hidden to the header but that jacked up the rest of the page and I couldn't figure out how to make that work! Please help a newbie!
LOOK AT THE VALUE:
#slideshow > div {
bottom: 10px;
left: 10px;
position: absolute;
right: 10px;
top: 10px; // this value to 0px
}
You just need to remove top: 10px value from the rule:
#slideshow > div {
top: 0;
}
It's at the line 195 of http://blueanchorcreative.com/style.css
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
The below css coding is used in my page. But in chrome it displays the image fine. but in firefox it breaks. I dont know why it shows like that. If anybody know the solution for this please help me. Thanks in advance.
.vote
{
position:absolute;
margin: 53px 3px 0 115px;
}
http://domian.com/mysite/pollpage.php?id=2&mview=72
This is my website page. The vote image alignment is correct in chrome but not in firefox
add position relative
.contentbox
{
position: relative;
}
and remove margin ,
add bottom and right
.vote {
position: absolute;
bottom: 0;
right: 45px;
}
...
Now define your main div #polling .pollpagewidth div .contentbox position relative and give to img tag position absolute and define right or bottom value according to your design
Hi now add this css in your style sheet and fixed this problem
#polling .pollpagewidth div .contentbox{
position:relative;
}
.contentbox > img {
bottom: 16px;
margin: 0;
padding: 0;
position: absolute;
right: 43px;
}