I have a div that displays an image and then has a half height semi transparent block on which I write text. This is done using some code from this site that utilizes "before". How do I hide this transparent block on hover? I've tried all I can think of. I can't use a standard transparent image because the image is different on each instance of the div and they aren't on site. The use of :before in this way is not something I fully understand but suspect it is complicating matters.
.summary_props_trans {
position: relative;
font-family:'Melbourne', Arial, sans-serif;
font-size: 2vmin;
color: black;
font-weight:normal;
z-index: 0;
width: 220px;
height: 165px;
margin: 5px;
float: left;
padding: 5px 10px 10px 5px;
background-repeat: no-repeat;
background-size:cover;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.summary_props_trans:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.summary_props_trans:before{
content:'';
display: block;
position: absolute;
background: white;
opacity: .5;
filter:alpha(opacity=50);
top: 0; right: 0; bottom: 0; left: 0;
margin: 0px 0px 50px 0px;
z-index: -1;
}
If you simply wish to apply styles to .summary_props_trans :before pseudo-element when the .summary_props_trans element matches a pseudo-class, you need to write .summary_props_trans:hover:before or .summary_props_trans:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector).
so, Simply add
.summary_props_trans:hover:before{
display:none;
}
or
.summary_props_trans:hover:before {
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
Here's an Example http://jsfiddle.net/dyaa/kn0z52ya/
Related
I am adding two buttons to my web page. The problem is that when I resize my browser window the buttons get out of place and sometimes get on top of eachother depending on how I resize the window. I've searched and discovered that if I used position : absolute on the CSS it would solve the problem but it doens't solve in my code and I would like to know how can I avoid this problem.
The HTML that I have is this one :
html, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
.button-a,.button-b {
padding: 0.6em 2em;
border: none;
outline: none;
color: rgb(255, 255, 255);
background: rgb(209, 192, 192);
cursor: pointer;
position: absolute;
z-index: 0;
border-radius: 10px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-a:before,.button-b:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
-webkit-filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing-button-color 20s linear infinite;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
#keyframes glowing-button-color {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.button-a:after,.button-b:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #222;
left: 0;
top: 0;
border-radius: 10px;
}
.button-a {
top:1%;
left:94%;
width:100px;
height:40px;
position: absolute;
background: none;
}
.button-b {
top:5.9%;
left:94%;
width:100px;
height:40px;
position: absolute;
background: none;
}
<button type="button" class="button-a" id="button_a">A</button>
<button type="button" class="button-b" id="button_b">B</button>
I am new to CSS so I don't know much about it and don't know how to fix this issue.
I will asume your HTML is just a blank template with 2 buttons in it, just like you display it in your question.
First of all, remove the position: absolute from your buttons. You only want position: absolute to your pseudo-classes ( ::before ) if you really want to work with pseudo-classes. Replace position: absolute with position: relative on the button elements.
If you want to make your buttons to stay IN place ( as if they are pinned ) you just have to add to your code
.button-a {
inset: 10px 10px 0 0;
}
.button-b {
inset: 0 0 10px 10px;
}
Now, what this will do is simple. First keep in mind the inset is just as writing top: __, left: __, bottom: __ and right: __. This will tell the browser to render your buttons at a specific point relative to the parent element ( in this case your body - I assume ).
So the above code block can also be written like:
.button-a {
top: 10px;
left: 10px;
bottom: 0;
right: 0;
}
.button-b {
top: 0;
left: 0;
bottom: 10px;
right: 10px;
}
Setting, for example, a top value equal to 20px this translates to 20px bellow the top 'line' of your parent container the browser will place your element, in this case your button.
Just set a diferent inset for each button and I think you are good to go.
Goal: Make nice effect of hovering buttons in pure CSS, which will use ::after and ::before pseudo-elements. Look at this jsFiddle example to see, what I want to reach.
Code: Button will have some styling, also an background-color, which is turned off in this example.
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
/*background-color: white;*/
text-decoration: none;
color: black;
}
Problem: I want to use background-color and when I enable it, then I can't see pseudo-elements. It is like that, because these pseudo-elements have z-index: -1;, which put them behind the background. When I change z-index to 0 or 1, then text is not visible.
What I can't do: I can't add new elements inside buttons (like spans), because this is one already running website and client decided to change the behavior of buttons, so here I am. There are tons of buttons in this website, so this is the reason, why I want to find solution with pseudo-elements, because trying to find every single button and change them would be inappropriate.
If i understood you well, this is what you are looking for:
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
/*background-color: white;*/
text-decoration: none;
color: black;
border:1px solid;
}
a.button:before {
content: " ";
display: block;
z-index: -1;
position: absolute;
height: 0%;
top: 0;
right: 0;
left: 0;
background: #ddd;
transition: height 0.2s ease;
}
a.button:hover:before {
height:100%;
}
TEST
Consider an alternative method of doing the background colour transition thing.
As seen in this edited demo:
/* remove all references to .button::before */
.button {
background-image: linear-gradient(to bottom,
transparent, transparent 100%,
red 100%, red);
transition: background-image 0.5s ease 0s;
}
/* the "gradient" above has the practical result of being fully transparent,
but it has been carefully crafted so that the transition gives the desired result */
.button:hover {
background-image: linear-gradient(to bottom,
transparent, transparent 0%,
red 0%, red);
}
You can transition gadients, and in this case it is done stop-by-stop. The first and last stops don't change, but the middle two transition from 100% to 0%, essentially meaning that the cut-off point between transparent and red slides from the bottom to the top of the button, giving the effect you want.
You can now replace transparent with your desired background colour.
* You may need to remove the z-index:-1 from the ::after element to get the border effect back.
You can do something like,
HTML
CSS
body {
background: #FF7272;
}
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
text-decoration: none;
color: black;
z-index: 0;
background-color: white;
width: 50px;
}
.button::before, .button::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.button::after {
content: "TEST";
height: 50%;
width: 72px;
text-align: center;
z-index: 2;
line-height: 0.2;
border-left: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
}
.button::before {
height: 0%;
background-color: red;
transition: all 0.5s ease 0s;
z-index: 1;
}
.button:hover::before {
height: 100%;
}
Example: https://jsfiddle.net/LL0f7rwp/6/
Some values are hard coded, but hope you can get an idea out of it :)
It's because z-index: -1 and background-color: white will push your :before and :after elements beneath.
Remove z-index: -1 from :after and :before and add to hover .button:hover::before
Make the background-color: transparent while hovering. Updated fiddle.
body {
background: #FF7272;
}
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
background-color: white;
text-decoration: none;
color: black;
}
.button::before,
.button::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.button::after {
height: 50%;
border: 4px solid red;
border-top: 0;
}
.button::before {
height: 0%;
background-color: red;
transition: all 0.5s ease 0s;
}
.button:hover::before {
height: 100%;
z-index: -1;
}
.button:hover {
background-color: transparent;
}
TEST
I'm trying to get a trapezoidal perspective shape to have the whole area be clickable. I've gotten it to work in Firefox and even IE, but Chrome isn't cooperating too well.
Here's a fiddle with the shape and a link: http://jsfiddle.net/9n9uh6f6/1/
As you can tell, the link doesn't become active until you hover over the 'area' part of the text. In other browsers, the whole height of the shape is clickable.
I read that Chrome renders a perspective image differently and perhaps that's why it's not doing what it's supposed to.
Here's my CSS:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}
Please have look at this code:
.prodcaptions {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
perspective: 150px;
perspective-origin: 50% 0;
}
a{
padding: 50px;
position: absolute;
border: 1px solid black;
transform: rotateX(-15deg);
}
Seems to work the way you want it. fiddle
Try this shape for link trapazoid shape - jsFiddle
Advantage - you can change skew property to change angle of shape! Easy and effective! Reverse value for reverse shape!
html
Click Here!
css
a {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 136px;
height: 85px;
/* demo-only decoration */
margin: 100px auto;
font: 16px/50px Arial, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: orange;
}
a:before, a:after {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
/* demo-only decoration */
border-radius: 4px;
background-color: orange;
}
a:before {
transform: skew(-20deg);
left: 25px;
}
a:after {
transform: skew(20deg);
right: 25px;
left: auto;
}
I am trying to create a style using CSS and HTML. My desire style is something similar to this.
Most of things of that style have been done with pure CSS and HTML.
This is my CSS -
.filter-box {
float: left;
margin: 0 3% 0 2%;
width :29%;
> .main-cat {
background-color: #FFFFFF;
display: block;
margin-top: 25px;
padding: 10px;
position: relative;
> h3 {
margin: 0;
}
}
> .main-cat:after {
border-bottom: 15px solid rgba(0, 0, 0, 0);
border-left: 15px solid #FFFFFF;
border-top: 15px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
margin-top: -15px;
position: absolute;
right: -14px;
top: 50%;
width: 0;
}
> .main-cat:first-child {
margin-top: 0;
}
> .sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
> h4 {
margin: 0;
}
}
}
My problem is when I am trying to display a let border with a bold circle bullet on the left side of the sub category DIV.
Can any body tell me is this possible with pure CSS and HTML without using any image?
This is my code so far: JS BIN
Any comments would be greatly welcome.
Thank You.
Another possibilities would be to use background-image (gradients) and bullets of list-item , resized via font-size : DEMO
The CSS update could be :(see comment for explanation )
.filter-box {
background:linear-gradient(to right,
transparent 15px,
white 15px,
white 17px,
transparent 17px); /* draws the vertical bar aside list-items */
}
background:linear-gradient( /* draw orange background */
to right,
transparent 40px ,
#FF9000 40px),
linear-gradient(/* draw middle white bar */
to bottom,
transparent 49%,
white 48%,
white 52%,
transparent 51%
) right no-repeat;
background-size:
auto auto/* no need to resize first gradient */,
95% 100% /*reduce width of second gradient */;
display:list-item;/* lests get a round bullet if this is not a li */
color:white; /* give color to bullet */
font-size:2.2em;/* resize bullet */
list-style-position:inside;/* keep bullet inside element */
}
.filter-box > .sub-cat > h4 {
margin: 0;
font-size:0.6em;/* resize to a normal font-size from em value inherited */
display:inline-block;/* stands aside bullet */
text-align: right;/* align to right */
width:85%;/* keep min/max-width under control*/
}
Notice: no pseudo elements involved, gradient can be image for better compatibilitie and dispatch within main container , sub container and title for the background-color to increase compatibiliti with old browser.
As mentionned earlier , this menu/list deserve to be build from an HTML list.
Demo: http://jsfiddle.net/abhitalks/4LB5t/
CSS:
.sub-cat:before {
content: ' ';
border-left: 1px solid white;
display: inline-block;
width: 16px; height: 42px;
position: absolute;
left: 40px; margin: 0px; margin-top: -8px;
z-index: 10;
}
.sub-cat:after {
content: '';
display: inline-block;
width: 8px; height: 8px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 36px; margin-top: -8px;
}
Update:
Demo 2: http://jsfiddle.net/abhitalks/4LB5t/1/
Just increase the height on .sub-cat:before.
Update 2:
Demo 3: http://jsfiddle.net/abhitalks/4LB5t/2/
Added your horizontal border as well. The only changes in the css are:
.sub-cat:before {
...
border-bottom: 1px solid white;
margin-top: -26px;
z-index: -1;
}
You have to tweak and tune the styles to achieve what you want. Hope that helps.
You can use the :before and :after elements in the sub-category to design the circle and left border.
Use the :before to make the circle as #megha outlined, and position it with the vertical center of the sub-cat.
Put the position of the .subcat as position: relative, so that you can define the positions of the absolutely positioned :before and :after in relation to the left edge of .subcat
Then use the :after and style it as
width: 2px;
height: 100%;
top: 0;
left: -10px
Hope this helps
Look at this pen. I have modified some of the styles in the answer to make it work. (SCSS syntax)
http://codepen.io/anon/pen/dJepq
.sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
position: relative;
&:before {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ff9000;
content: "";
position: absolute;
top: 12px;
left: -20px;
}
&:after {
width: 2px;
top: -5px;
bottom: 0;
left: -16px;
content: "";
position: absolute;
background-color: #ff9000;
}
}
}
Using :after and :before pseudo element you can achieve the result.
Check the DEMO.
Here is the CSS would be required.
.sub-cat:before{
content: "";
position:absolute;
left:25px;
height: 10px;
width: 10px;
border-radius: 50%;
background:white;
margin-top: 5px;
}
.sub-cat:after{
content: "";
position:absolute;
top:55px;
left:29px;
height:21%;
border-right: 1px solid white;
}
.sub-cat h4:before{
content: " ";
position:absolute;
left:32px;
width: 10px;
height: 10px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border-right: 1px solid white;}
.sub-cat h4:after{
content: " ";
margin-left:10px;
margin-top:4px;
position:absolute;
border-bottom: 8px solid rgba(0, 0, 0, 0);
border-left: 8px solid #000000;
border-top: 8px solid rgba(0, 0, 0, 0);
}
A circular bullet can be created using the html :
<div id="circle"></div>
and its corresponding css
#circle
{
width:10px;
height:10px;
border-radius:5px;
background-color:white;
}
I am unable to understand what "let border" means.Hope this helps!
I would like to make an overlay on my site to prevent user from clicking somewhere. It's sometimes very handy. In the middle of the overlay I want to place a message like "please wait.." or "loading...".
I've made a div, which covers the whole screen and a span inside of it, which contains the message. I managed to center the span inside the div horizontally, but I'm struggling with the vertical alignment of it. The message should be also vertically centered.
Here is my code so far:
HTML:
<div id="overlay">
<span>Please wait...</span>
</div>
CSS:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: #000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#overlay span {
padding: 5px;
border-radius: 5px;
color: #000;
background-color: #fff;
}
Here is the jsfiddle.
So, how do I get the span with the message vertically centered?
LIke this
DEMO
add below select in position:relative or top:50%;
CSS
#overlay span {
padding: 5px;
border-radius: 5px;
color: #000;
background-color: #fff;
position:relative;
top:50%;
}
Besides that if the Center object is bigger in height & width, you can give negative margins exactly half of the same.
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: #000;enter code here
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#overlay span {
padding: 5px;
border-radius: 5px;
color: #000;
background-color: #fff;
height:100px;
width:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
display:block;
}