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*/
}
Related
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>
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 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 am trying to create a css ribbon, responsive would be great. Otherwise I'll just show it on desktop.
Here is the link to my dev site: http://website-test-lab.com/sites/xpect/
If you take a look at the the orange callout area underneath the header images, I'd like to have to have it look like the attached image.
Any help would be appreciated.
You can simply do it with before and after pseudo classes and the border triangle trick. Your HTML would be super simple:
<div class="ribbon">...</div>
And your CSS would be this:
.ribbon {
background: #f47d19;
position: relative;
height: 50px;
width: 300px;
margin:0 25px; //Half of height
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
height: 0;
width: 0;
top: 0;
border: 25px solid transparent; //Half of height
border-top-color: #f47d19;
border-bottom-color: #f47d19;
z-index: -1; //Place triangles behind div
}
.ribbon:before {
left: -25px; //Half of height
}
.ribbon:after {
right: -25px; //Half of height
}
Fiddle Example Here
Then for the responsive part, you would simply change the width, height, margin and position properties to match whatever resolution you are at.
If you're using Bootstrap, you can use the .img-responsive class to the image. If not, try to add height:auto in css for that. That'll make it responsive.
| parent div |
| div float left (image of >) | div float left (content) | div float left (img <) |
|div style clear both |
this way you can throw all of your content into the middle div and have the whole thing responsive
could also do this with a basic table
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to figure out how the card swipe/flip effect was done as seen on this site: http://catalystconference.com/ (under the "Our Favorites" and similar sections). Can this be accomplished using only CSS?
Don't rely on text-indent, because it forces the browser to actually render the negative space that you have specified. Instead, try using absolute positioning and left/top/bottom/right properties to help position (and subsequently reveal/hide) your hidden pane.
For your HTML, I have taken the liberty to create two panes in your <div>: a visible and a hidden one.
<div>
<p class="pane-visible">Visible pane.</p>
<p class="pane-hidden">Hidden pane.</p>
</div>
CSS wise, the visible pane is positioned as is, but the hidden pane is positioned absolutely (but relative to its parent) that is 100% off from the top (therefore sits at the bottom of the parent container, but out of sight). The trick is to change the top property of the hidden pane when the parent is hovered, to bring it to the top. The animation is easily done with the CSS3 property: transition.
div {
overflow: hidden;
position: relative;
width: 300px;
height: 300px;
}
div > p[class|="pane"] { /* Targets element with the class "pane-" (notice the dash) */
box-sizing: border-box; /* Forces width and height to be at 300px even with padding */
padding: 1em;
width: 300px;
height: 300px;
}
div > p[class*="hidden"] {
position: absolute;
top: 100%;
left: 0;
transition: all .25s ease-in-out; /* You might want to add vendor prefixes */
}
div:hover > p[class*="hidden"] {
top: 0;
}
Here is my proof-of-concept fiddle: http://jsfiddle.net/teddyrised/TTv4q/2/
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;
}