Here is my jsfiddle http://jsfiddle.net/6XdcY/4/.
I have the DIV which appears while hovering another DIV.
In containing div there is with display: block and 100% width and height.
This <A> interferes the div which should appear while hovering.
<div id='language'>
<a class='language' href='en'></a>
<a class='delete' href='' ></a>
</div>
#language {
width: 172px;
height: 218px;
opacity: 0.85;
margin: 2px;
z-index: 1;
float: left;
}
#language a.language {
width: 100%;
height: 100%;
display: block;
z-index: 2;
}
#language:hover {
width: 172px;
height: 218px;
opacity: 1;
cursor: pointer;
}
#language:hover .delete{
display: block;
}
.delete {
display: none;
width: 30px;
height: 30px;
background: #fff url(http://tyche.ge/palabra/images/delete_language.png);
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-left: 1px solid #88bde4;
border-bottom: 1px solid #88bde4;
margin-right: 1px;
margin-top: 1px;
top: 1;
right: 1;
float: right;
z-index: 999;
}
The delete button should be inside the containing div.
You'll understand better with jsfiddle.
Thanks in advance
Try adding this to the delete button:
position: relative;
top: -30px;
Live Demo
You can try this:
#language a.language {
display: block;
height: 83%; // reduce the height from 100%
width: 100%;
z-index: 2;
}
Or
Add two properties in .delete class, like this:
.delete
{
// other properties
position: relative;
top: -35px;
}
Related
I have a container which holds an image and a panel the appears when you hover over that image. I am trying to get the box shadow on the panel to appear behind the image, while the rest of the panel overlaps the image.
What I have vs. What I'd like to have
HTML:
<div class="container">
<img class="icon" src="http://placehold.it/350x350" />
<div class="sum-container left">
<img src="http://placehold.it/350x150" />
</div>
</div>
CSS:
.container .sum-container {
position: absolute;
top: 0;
bottom: 0;
border: solid 5px blue;
background-color: white;
width: 250px;
height: 200px;
max-height: 100%;
opacity: 0;
overflow: hidden;
z-index: 5;
pointer-events: none;
transition-property: opacity;
transition-duration: .250s;
}
.container .sum-container.left {
right: 100%;
margin-right: -5px;
border-right: none;
padding-right: 0px;
box-shadow: 5px 5px 0px #888888;
}
.container .icon:hover + .sum-container {
z-index: 6;
opacity: 1;
}
.container {
position: absolute;
left: 300px;
top: 20px;
}
.container img {
width: 100%;
}
.icon {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: auto;
max-width: 480px;
background-color: blue;
box-shadow: 5px 5px 0px #888888;
text-align: center;
font-size: 26px;
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border: none;
outline: none;
user-drag: none;
}
I've included a JSFiddle as well.
Also, still new here. If anyone can suggest a better title, please let me know. I realize you can't actually set multiple z-indexes for one element, but I'm looking for a solution with a similar effect.
If I understand the end goal, you can make the shadow a pseudo element with a negative z-index and remove the z-index from .sum-container and .sum-container will be over .icon and it's pseudo element will be under both of them.
.container .sum-container {
position: absolute;
top: 0;
bottom: 0;
border: solid 5px blue;
background-color: white;
width: 250px;
height: 200px;
max-height: 100%;
opacity: 1;
pointer-events: none;
transition-property: opacity;
transition-duration: .250s;
}
.sum-container:after {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
content: '';
background: #888;
transform: translate(0,10px);
z-index: -1;
}
.container .sum-container.left {
right: 100%;
margin-right: -5px;
border-right: none;
padding-right: 0px;
}
.container .icon:hover + .sum-container {
opacity: 1;
}
.container {
position: absolute;
left: 300px;
top: 20px;
}
.container img {
width: 100%;
}
.icon {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: auto;
max-width: 480px;
background-color: blue;
box-shadow: 5px 5px 0px #888888;
text-align: center;
font-size: 26px;
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border: none;
outline: none;
user-drag: none;
}
<div class="container">
<img class="icon" src="http://placehold.it/350x350" />
<div class="sum-container left">
<img src="http://placehold.it/350x150" />
</div>
</div>
I have two elements a nav div and a slide controller div, but I just cannot make the nav div overlap the slide controller div. Here is my code (1. Nav code 2. Slide controller code):
nav {
position: absolute;
width: 200px;
height: 100vh;
background-color: white;
margin-top: -20px;
z-index: 1;
}
nav ol {
margin-top: 100px;
width: 190px;
}
nav li{
display: block;
margin: 0px;
padding: 15px;
position: relative;
width: 170px;
border-bottom: 1px solid #bfbebe
}
nav a {
color: black;
}
#Slider_Control {
position: absolute;
z-index: 2;
width: 210px;
height: 40px;
background-color: #d51200;
margin-left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
margin-top: 574px;
}
.CircleControl {
width: 10px;
height: 10px;
display: inline-block;
background: white;
border-radius: 100%;
margin-right: 5px;
margin-left: 5px;
}
#Circles {
text-align: center;
height: 40px;
line-height: 40px;
}
#Arrow_1, #Arrow_2 {
position: absolute;
width: 20px;
height: 0 auto;
margin-top: -40px;
padding: 10px;
background: #ed1602
}
#Arrow_2 {
margin-left: 170px;
transform: rotate(180deg);
}
#Triangle_1 {
width: 0;
height: 0;
border-bottom: 14px solid transparent;
border-left: 20px solid #7d0b00;
margin-left: 210px;
margin-top: -14px;
}
#Triangle_2 {
position: absolute;
width: 0;
height: 0;
border-bottom: 14px solid transparent;
border-right:20px solid #7d0b00;
margin-top: -14px;
margin-left: -20px;
}
I hope someone could solve this problem that the slider controller keeps overlapping the nav div, which sould be the other way around.
(Let me now if you need some more information)
Well from what i'm seeing, if you want the nav tag to overlap #Slider_Control, since they both have position:absolute, all you have to do is put an higher z-index on your nav tag. Right now your nav is at 1 and your Slider_Control is at 2, so the Slider_Control will always be on top.
But again, I could be wrong, providing the html context of this would help.
Here are my box classes
.rectangle-box {
width: 200px;
height: 30px;
background: #808080;
opacity: 0.3;
float: right;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
In HTML:
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
DEMO: https://jsfiddle.net/uq6ectfc/1/
I need rectangle-red to have opacity of 1 and rectangle-box of 0.3. But it sticks to the parent opacity.
How can I fix it?
You can't the opacity cannot be greater than parent
but you can use two methods
I have used rgba rgba(0,0,0,0.0)
.rectangle-box {
width: 200px;
height: 30px;
background: rgba(128, 128, 128, 0.3);
float: right;
position: relative;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
Or the second method i have used :pseudo element to add a background
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.rectangle-box:after {
content: '';
opacity: 0.3;
background: #808080;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index:-1;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
Use RGBA instead of hex. using opacity: affects child elements and rgba does not
.rectangle-box {
width: 200px;
height: 30px;
background-color: rgba(128,128,128, 0.3);
float: right;
}
.rectangle-red {
width: 65px;
height: 30px;
background-color: rgba(255,71,66, 1);
float: left;
}
A better way to structure this would be to create a div that contains both boxes. This way each of the boxes opacity will not interfere with each other.
<div class="container">
<div class="rectangle-box"></div>
<div class="rectangle-red"></div>
</div>
.container{
width: 200px;
height: 30px;
float: right;
}
.rectangle-box {
width: 100%;
height: 100%;
background: #808080;
opacity: 0.3;
}
.rectangle-red {
width: 65px;
height: 100%;
background: #ff4742;
opacity: 1;
float: left;
}
you can't
All you can do is create element inside .rectangle-box absolute (my case) or relative or whatever you want with lower opacity .lower-opacityso they are siblings and not disturb each other opacity property
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.lower-opacity{
position: absolute;
opacity: 0.3;
width: 100%;
height: 100%;
background: #808080; //**EDITED** BACKGROUND NOW WILL BE TRANSPARENT
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="lower-opacity"></div>
<div class="rectangle-red"></div>
</div>
Here is a nice and neat way using pseudo elements.
With this you can as well add images and svg to each background which gives a lot of options.
If you need other elements within each box, you'll need the second inner div.
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.rectangle-box:before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: #808080;
opacity: 0.3;
}
.rectangle-box:after {
content: "";
top: 0;
left: 0;
width: 65px;
height: 100%;
position: absolute;
background: #ff4742;
opacity: 1;
}
<div class="rectangle-box">
</div>
I am trying to achieve the following, with pure CSS and no images:
As you can see, its a heading with a line afterwards. The problem is, that the line should has 2 different colors and more important, 2 different heights.
The first parts color is orange, has a height of 3px and a fixed width of 100px (padding-left: 15px)
The sedond parts color is #E1E1E1 and should fill the rest of the line.
My first try was this:
<h1><span>OUR ARTICLES</span></h1>
<style>
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:after {
content: "";
position: absolute;
height: 1px;
top: 45%;
width: 999px;
background: #E1E1E1;
border-left: 100px solid orange;
left: 100%;
margin-left: 15px;
}
</style>
See http://jsfiddle.net/oyxmxoLs/
But as you can see, I can't make the orange part thicker than the grey one.
Any ideas?
Another way: Flexbox
With display: flex you don't have to give the line a certain width and you can make sure it is always responsive.
We are going here with an progressive enhancement approach. We'll make a cut after IE8 by using ::before instead of :before. In IE9 only the grey line will be shown (underneath the title).
h1 {
align-items: center;
color: #444;
display: flex;
font: 18px/1.3 sans-serif;
margin: 18px 15px;
white-space: nowrap;
}
h1::before {
background-color: orange;
content: "";
height: 4px;
margin-left: 10px;
order: 2;
width: 100px;
}
h1::after {
background-color: #E1E1E1;
content: "";
display: block;
height: 2px;
order: 3;
width: 100%;
}
<h1>Our articles</h1>
Do not forget to add vendor-prefixes!
You can solve this by using :before and :after
http://jsfiddle.net/oyxmxoLs/1/
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:before {
content: "";
position: absolute;
height: 1px;
top: 45%;
width: 999px;
background: #E1E1E1;
left: 100%;
margin-left: 15px;
}
h1 span:after {
content: "";
position: absolute;
height: 3px;
top: 45%;
width: 100px;
background: orange;
left: 100%;
margin-left: 15px;
margin-top:-1px;
}
<h1><span>OUR ARTICLES</span></h1>
You can also use the :before pseudo-element to add the orange line.
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:after, h1 span:before {
content: "";
position: absolute;
height: 1px;
left: 100%;
top: 45%;
margin-left: 15px;
}
h1 span:after {
width: 999px;
background: #E1E1E1;
}
h1 span:before {
height: 3px;
z-index: 1;
margin-top: -1px;
border-radius: 2px;
width: 100px;
background: orange;
}
<h1><span>OUR ARTICLES</span></h1>
I have a few thumbnail images that on hover have a multi colored hover styling (looks like this, the yellow thumbnail is what it looks like when you hover over it)
The only problem is that I can't get the text inside to align vertically in the middle of the thumbnail without breaking something else. When I change .thumb to display: table; and .align-mid to display: table-cell; with vertical-align: middle; the text aligns to the middle but the background color becomes opaque. Looks like this:
I can't seem to figure out how to accomplish this.
HTML:
<div class="thumb" onclick="location.href='{{ cms:page:thumb_one.link:string }}'">
{{ cms:page_file:thumb_one.image:image}}
<div class="align-mid">
{{ cms:page:thumb_one.text:string }}<br>
{{ cms:page:thumb_one.description:string }}
</div>
<div class="yellow">
</div>
</div>
CSS:
.thumb {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
display:inline-block;
position: relative;
height: 170px;
width: 235px;
overflow: hidden;
}
.thumb:after {
background: rgba(255,255,255,.7);
content:'';
display: block;
height: 170px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.thumb:hover:after {
opacity: 1;
padding: 20px;
transition: opacity .4s;
}
.thumb:hover > .align-mid {
background-color: transparent;
color: white;
}
.thumb:hover {
cursor: pointer;
}
.thumb img {
height: 100%;
width: 100%;
}
.yellow {
opacity: 0;
}
.thumb:hover .yellow {
background: rgba(255,213,43,.8);
content:'';
display: block;
left: 13px;
right: 13px;
bottom: 13px;
top: 13px;
opacity: 1;
position: absolute;
transition: opacity .4s;
z-index: 2;
}
.align-mid {
background-color: rgba(0,0,0,.5);
color: rgb(255,213,43);
height: auto;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
top: -105px;
width: 100%;
z-index: 3;
}
It is obvious that when your wrapper have more than a child , and all children are viewed as table cells , in case you dont want them stacked vertically ( y-axis) , you have to assign absolute positioning to each , this way they gonna be stacked on top of each other ( z-axis)
so a simple solution will be:
.thumb img { height: 100%; width: 100%; position:absolute; }