I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 1 year ago.
I wanted to experiment with ::after, so I made three figures (square, circle and triangle) then put their respective after, and works fine with the circle and square however with the triangle makes a gap and I don't understand why, I tried changing the positions and displays attributes but it didn't work
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 28.5%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
You can remove the gap by setting the height to 0px
note: I also set left: 48% just to make the triangulo word in the center
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
height: 0px; /* << here */
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 48%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
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>
Good Morning, I am currently working on portfolio and I am trying to make my cover elements completely center vertically and horizontal. I have managed to do this with margin: 0 auto and display: table-cell, vertical-align and for some reason when I am added my CSS3 triangles it began to push my logo to the left. Is there any tricks to fix this?
.cover {
background-size: cover;
background-color: white;
display: table;
width: 100%;
padding: 0 20%;
height: 1900px;
}
.logo-container {
margin: 0 auto;
background-size: cover;
height: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
padding-top: 40px;
padding-bottom: 40px;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #84cfc5;
border-left: 100px solid transparent;
padding-top: 1500px;
margin-left: 850px;
margin: 0 auto;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #84cfc5;
border-right: 100px solid transparent;
margin-right: 1000px;
margin-left: -200px;
position: relative;
left: -1000px;
right: -1000px;
top: 150px;
}
<div class="cover">
<div class="logo-container">
<img class="logo" src="images/personal-logo.png" alt="logo-brand" />
</div>
<div id="triangle-topright"></div>
<div id="triangle-bottomright"></div>
</div>
The triangles are causing a shift because they are taking up space in the page flow. You should position them using position:absolute to get them out of the page flow, with position:relative set on the parent .cover div. Example below.
html, body {
height: 100%;
margin: 0;
}
.cover {
background-color: white;
display: table;
width: 100%;
height: 100%;
position: relative;
}
.logo-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #84cfc5;
border-left: 100px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #84cfc5;
border-right: 100px solid transparent;
position: absolute;
left: 0;
top: 0;
}
<div class="cover">
<div class="logo-container">
<img class="logo" src="http://placehold.it/240x80" alt="logo-brand" />
</div>
<div id="triangle-topright"></div>
<div id="triangle-bottomright"></div>
</div>
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
I want to crop images that are too tall. But "overflow: hidden" is not doing anything.
Here is my HTML:
<body id="index_body">
<div id="panel">
<div class="user_container">
<img class="photo_thumbnail" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRRK4PrgJXJ05LYI33B5rqX4xh18UIUQ_kqplT_rXheF5bqPHrE"/>
</div>
. . .
</div>
</body>
Here is my CSS:
#index_body {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
#panel {
display: inline-block;
width: 90%;
margin: auto;
text-align: left;
}
.user_container {
margin: 15px;
border-radius: 5px;
position: relative;
width: 170px;
height: 170px;
z-index: 1;
display: inline-block;
border: 2px dashed blue;
}
.photo_thumbnail {
margin: 0;
z-index: 1;
position: absolute;
border-radius: 5px;
border: 2px gray solid;
width: 170px;
overflow: hidden;
}
See it in action here: http://jsfiddle.net/9oLzynbx/1/.
Others have reported an issue with overflow hidden when the img it's attributed to is not in a parent div with position: relative. See: overflow: hidden not working. But that's not my issue.
Thanks for any help!
You need to put the:
overflow: hidden;
on the container: .user_container
Give overflow: hidden to the .user_container:
.user_container {
margin: 15px;
border-radius: 5px;
position: relative;
width: 170px;
height: 170px;
z-index: 1;
display: inline-block;
border: 2px dashed blue;
overflow: hidden;
}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/9oLzynbx/7/
try this code
.user_container {
margin: 15px;
border-radius: 5px;
position: relative;
width: 170px;
height: 170px;
z-index: 1;
display: inline-block;
border: 2px dashed blue;
overflow: hidden;
}