I have a white border that should turn to red on hover (which it does) but the red part doesn't cover the complete white dotted line for some reason. Can anybody guide me in the right direction?
View the site for more details:
Website
Try using the hover state on the .post-item
.post-item:hover .item-footer {border-top:3px dotted red;}
.post-item:hover .overlay {opacity:0.5;}
And use css-transitions to animate the change
here is an example
http://codepen.io/anon/pen/gKqrh
Related
How can I turn this into a normal semicircle, without it looking like a moon, and turn the image into a circle instead of an ellipsis?
http://jsfiddle.net/226tq1rb/1/
.image{
width:20%;
border-radius:500%;
border-right:60px solid rgba(0,0,250,0.1);
padding:100px;
}
Thanks.
Sorted, I was "disabling" the top, left, and bottom borders, if I simply change the color to transparent they aren't visible but are technically still there, thus the edges of the border become straight instead of tapering.
I have created a css rotating tetrahedron and now the only thing that prevents me from being happy is that I see that jogged line of the bottom polygon. Here is a jsfiddle: http://jsfiddle.net/mikeonly/uxy9x23n/.
Obviously, I want it to be antialiased. And what I have already tried is fixing it with:
scale(.9999)
adding padding
rotating the bottom polygon in different plans
setting the color of borders in rgba
creating outline: 2px solid transparent
Let me know in case the line is smooth for you. Also, there is a screenshot of that issue when I view it in the latest Chrome: http://imgur.com/nyKKTDb.
Thanks.
I'm having a curious problem with Less (bootstrap), in the property border-botom-color (CSS side).
I have this example where the bottom line of the active tab (Section 1) appears:
fiddle 1
And I have this exemple where the bottom line of the active tab (Section 1) do not appears:
fiddle 2
The unique diference is on CSS, at line 5365, in the fisrt example is border-bottom-color: transparent;, and in second example is border-bottom-color: #FFF;
I would like know why "transparent" do not works but putting a color (like #FFF) it works?
it's because ul.nav-tabs tag (parent of a tag) have colored border, the long grey horizontal border (see jsfiddle1 line 5328). you need to set a border bottom color as white to override it's parent border, so it will be look transparent.
transparent just adds a completely transparent border over the top of the one defined by the border property hence the color is shown. #fff is shown over the top of the border and blocks out the other color hence white is shown. You could get around the problem by specifying a color for each border individually.
the reason is because that line is being generated somewhere else. So when you put border-bottom-color:transparent; you are just seeing the other line right through it. But when you make it white, you are drawing a new white line over it.
fiddle displaying issue
I have a following situation:
Div has to have a solid color on top, and then at the bottom thee should be a transparent image 1px wide.
(So final look should be that I have a gradient from top to bottom of div)
When I put :
background: #fff url("../../images/bck1px.png") repeat-x scroll center bottom transparent;
white color is shown over transparent image
I have to do this in CSS2 style!
Can anybody help?
Here is a link... maybe this is what you want to do.
If yes, the trick is to use the image and have it align in the bottom of the div and repeat horizontally. The clear is there to make sure to push the bottom of you container div.
http://jsfiddle.net/etienne_carre/GEkFn/
Good luck
It’s not entirely clear what you’re asking — a transparent image is transparent, so it won’t create a gradient.
In the code you’ve posted, you have applied a white background colour as well as an image (background: #fff url...). If you leave out the colour (background: url...) you shouldn’t get white any more. I don’t know if that’ll solve your problem.
If you could post all the CSS applied to the <div>, that might help.
If someone ever arrives here, future has finally come and there is better ways to do it.
Please refer to the following links for a CSS method:
Gradient opacity on the bottom of div
Right now I have this CSS for a button:
background: #19558D url(../images/gradient.gif) repeat-x top left;
The gradient appears, but the background color doesn't. When I reload the page, the color appears for a split second, but then disappears to the gradient. How can I get both of them to work?
Ok, so you have several options:
1. Use Only Images:
You can do the job by editing the gradient so that it looks exactly how you like it to be, without any new CSS. (This would be the one you used to solve the problem).
2. Use Image on the top and the rest in solid color:
element{ background:#000 (url) top left repeat-x; }
This will place the image in url at the top, and make the rest of the element of a certain solid color. Be aware that if the image covers all of the element and isn't transparent, then the solid color will not be visible.
3. Make the gradient transparent/alpha:
If the gradient covers all of the element, you can make it transparent, or semi transparent, so that the CSS background-color is visible behind it. For example, if you make a gradient that goes from black to transparent, and then add a white CSS bg, then you will get a black to white gradient. Be aware that the only images that will work with this method are .png ones because they are the only ones that support alpha levels (partial transparencies).
is the GIF transparent? I use PNG format as PNG-24 allows alphablending masks, where as GIF only supports transparent or not (1/0)
But I think you need to post a link to it or a image of what it looks like, including the GIF.
We need some pixels specs, such as width and height to fully understand the problem.