i set the opacity property of the outer div to the .5,
and i set the inner div's opacity value to be 1
but it still to be transparent at all
here is the sample code:
HTML:
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
CSS:
#div1{
background: black;
opacity:.5;
width:300px;
height:300px;
}
#div2{
background:white;
width:150px;
height:150px;
opacity: 1;
}
#div3{
display: block;
width: 50px;
height: 50px;
opacity: 1;
background: black;
}
so where is the problem?
or anything i have miss ?
help me!
This is a common misconception about CSS, you can't set opacity on a parent and then prevent it from affecting its children. What you need is to set an alpha color for #div1:
#div1{
background: rgba(0,0,0,0.5);
width:300px;
height:300px;
}
Related
How could to show left side of image at begin, and show right side on mouse hover.
body{
background:gray;
}
img{
width: 100px;
}
img:hover {
}
<img src="https://i.stack.imgur.com/AQdqr.png" >
I'm not sure if this is what you need, but you yourself can remake this code for your task.
body {
background: gray;
}
img {
width: 50px;
height: 50px;
object-fit: cover;
object-position: 0;
}
img:hover {
object-position: 100%;
}
<img src="https://i.stack.imgur.com/AQdqr.png">
I will sugest to add a container with two elements inside : your image and a div that will hide half of your image, and on hover we will remove div to show your img
.container{
position:relative;
width:150px;
height:150px;
border:2px solid black;
}
.container:hover .bg{
width:0%;
}
.bg{
transition:all .2s;
position:absolute;
right:0;
width:50%;
height:100%;
background:white;
}
img{
position:absolute;
height:100%;
object-fit: contain;
}
<div class="container">
<img src="https://i.stack.imgur.com/AQdqr.png"/>
<div class="bg"></div>
</div>
Youre not clear what you want. I think you want different color while hovering on the picture.
For this crop this picture to a single object. Then you can use css grayscale filter on hover.
body {
background: gray;
}
img {
width: 100px;
}
img:hover {
filter: grayscale(100%);
transition: 1s;
}
<img src="https://i.stack.imgur.com/AQdqr.png">
I have a div-container, a bootstrap collapse element. In it there is another round element, which changes position, when using the collapse function. Means: It should be positioned on the top-border, but behind the bottom-border.
How would you solve this task?
My first idea was to use object-fit to cut off the bottom part of the round element, but that did not look well with transition and collapse. Second idea was to use a thick border-bottom as an after-pseudo-element to cover the bottom part, which did not work so far.
Do you have any ideas or have you done something like that?
Thank you!
Use clip-path:
.box {
border: 3px solid;
height: 200px;
margin: 50px;
position: relative;
clip-path: inset(-200% 0 0); /* a big negative value on the top to clip only left/right/bottom */
transition: 1s;
}
.box:hover {
height: 50px;
}
.box:before {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
border: 3px solid;
border-radius: 50%;
background: red;
}
<div class="box">
</div>
You may also use transform3D + background to hide portions of it:
div {
margin:0 1em;
padding:1px;
display:flex;
padding-bottom:2em;
background:white;
transform-style: preserve-3d;
}
div[class] {
border:solid;
border-bottom:none;
height:150px;
transition:0.25s;
}
div[class] + div {
border-top:solid;
}
div[class]:hover {
height:60px;
}
div span {
height:150px;
width:150px;
align-self:center;
background:red;
border-radius:50%;
margin-right:1em;
border:solid;
margin-left:auto;
margin-bottom:-2.2em;
transform:rotatex(-0.15deg) translatez(1px);;
}
<div>Whatever stands here</div>
<div class>
<p>hover to collapse</p>
<span></span>
</div>
<div>Whatever stands next</div>
HTML FILE:
<div class="one">
<div class="two">
<h2>ITEM NAME</h2>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:50%;
height:325px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
}
.two{
position:absolute;
display:inline-block;
width:100%;
height:100%;
background-color: gray;
transition: all 0.3s ease-out;
}
.two h2{padding-top: 20%;}
I want to make a hover transition effect, just like this website:
Here
You can see in portfolio when you hover the link another light-blue div expands. I guess it's using transform: scale() I tried to do something like that, but the second div is overpassing the size of the parent div. How may I fix that? What am I doing wrong?
Also, I have my codepen sample.
The image of the lion you are using has a transparent background which appears along the edges, giving the impression that div one is actually smaller than it is. Set the background on the div one to a background colour instead of an image, and you will see what i mean.
i holp to help:
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:510px;
height:330px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
border:1px solid blue;
}
.two{
position:absolute;
display:block;
width:10%;
height:10%;
background-color: gray;
transition: all 0.3s ease-out;
margin-left:50%;
margin-top:30%;
opacity:0;
border-radius:100px;
}
.two h2{margin-top: 20%; margin-left:20%;}
.one:hover .two{
display:inline-block;
opacity: 1;
width:100%;
height:100%;
-webkit-transform: scale(1);
margin:0px !important;
border-radius:2px !important;
}
Sorry for my english.
I have a problem. I need to create a DIV inside another DIV, which has to have a white background. I tried using skew, but It didnt work well.
Here is an image:
There are at least several ways to achieve this, however the simplest way may be using linear-gradient background. Its quality is not really good compared with others but it's totally acceptable.
Try this:
div {
width:600px;
height:300px;
background:teal;
border:1px solid teal;
}
.top {
width:100%;
height:100px;
font-size:25px;
padding-left:30px;
background:linear-gradient(175deg, white 60%, transparent 62%);
border:none;
box-sizing:border-box;
}
HTML:
<div>
<div class='top'>Custom<br/>Home</div>
</div>
Demo.
You can do that with a pseudo element and transform rotate :
DEMO
HTML :
<div id="header">
Custom<br/>
Home
</div>
<div id="content"></div>
CSS :
#header{
background:#fff;
position:relative;
height:50px;
z-index:1;
font-size:30px;
padding-left:10%;
}
#header:before{
content:'';
position:absolute;
bottom:0;
right:0;
width:110%;
height:1000%;
background:inherit;
z-index:-1;
border-bottom:2px solid #636A6E;
-webkit-backface-visibility: hidden; /* to fix pixelisation in chrome */
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
#content{
min-height:500px;
background:#778385;
}
Since you need the border in your diagonal div, try this:
CSS:
.logo {
width:110%;
height:147px;
top:-10%;
left:-14px;
border:2px solid black;
position:absolute;
background:#fff;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
/* IE 9 */
-webkit-transform:rotate(-7deg);
/* Opera, Chrome, and Safari */
}
.container {
width:100%;
height:612px;
overflow:hidden;
background:#7b8284;
position:relative;
}
.inner {
position:absolute;
height:200px;
transform:rotate(7deg);
-ms-transform:rotate(7deg);
/* IE 9 */
-webkit-transform:rotate(7deg);
/* Opera, Chrome, and Safari */
padding:20px 90px;
top:30%;
font-size:30px;
}
HTML:
<div class="container">
<div class="logo">
<div class="inner">My Logo</div>
</div>
</div>
Demo: http://jsfiddle.net/lotusgodkk/BKfe9/1/
You can modify the top,left,font-size,background-color,transform, border as per your need
If you want to do it in pure CSS I would recommend using the transform: rotate(xxx) feature of CSS3. I've created a JS-Fiddle that will help you get started (not the best solution...), it is not based on your fiddle: http://jsfiddle.net/syTu7/
I think I understand your question, I think my example will help
HTML
<div class="wrapper">
<div class="innter">some text</div>
</div>
CSS
.wrapper {
position: relative;
width: 960px;
margin: 0 auto;
background: #ddd;
min-height: 100%;
height: 800px;
}
.innter {
height: 500px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #ececec;
}
In HTML,
<div class="wrapper">
<div class="inner">some content</div>
</div>
In CSS,
.inner {
background: #fff;
}
I am stuck here. Please help.
I want to make the following through css.
But when I use CSS positioning, I am getting this output
The fourth(GREEN) layer should go under first layer(BLUE) which is not happening.
This is the code I used.
HTML:
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
CSS:
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}
JSFiddle: http://jsfiddle.net/rkubs/
Even I tried to use Z-index. But no use. Help me. Thanks in advance.
WORKING DEMO :before
senario:
Using only one pseudo-element :before you just need to set border-top and border-right then give it an absolute position on the bottom left of div2
With the same HTML code as OP all you need is a Pseudo-element :before or :after combine witn z-index. To make it easy i put numbers in your HTML.
Note: you habe to set position relative to the element with the pseudo, the set the top border and the right border you can skeep that using box-shadow too see WORKING DEMO WITH BOX-SHADOW.
HTML
<div class="box1">1
</div>
<div class="box2">2
</div>
<div class="box3">3
</div>
<div class="box4">4
</div>
CSS
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
z-index: 3;
}
.box2:before{
content: '';
position: absolute;
bottom: -2px;
left: -2px;
width: 32px;
height: 30px;
border-top: 1px solid black;
border-right: 1px solid black;
z-index: 14;
background-color: #ff69fa;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO WITH BOX-SHADOW
Here you just need to change the width and height of .box2.
senario:
you choose one div in my case div2 you don't set the background-color then reset the the borders border:none; .
Since you have set div width, height and position relative you can now set :before and 'after' width a 100% width and 50% height, one on the top and the other on the bottom, then for :before set border-top and for :after set border-bottom.
Now set for both of then border-left and border-right.
div{
height:100px;
width:100px;
border:solid 1px;
position:relative;
}
.box1{
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
left:570px;
top:-30px;
border:none;
}
.box2:before,.box2:after{
content: '';
position: absolute;
background-color:#f6ff00;
width: 100%;
height: 50%;
left: 0;
border-left:1px solid black;
border-right:1px solid black;
}
.box2:before{
top: 0;
z-index: 3;
border-top:1px solid black;
}
.box2:after{
bottom: 0;
z-index: 0;
border-bottom:1px solid black;
}
.box3{
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO :BEFORE :AFTER FLEXIBLE
I'm not sure you can do that with normal way, a little hack may be help.
What i do is to add another box right under .box1 with z-index above of all, and with size 50% of the parent.
HTML:
<div class="box1">
<div class="box1-fake"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
CSS:
.box1-fake{
background-color:#00d8ff;
position:absolute;
left: -1px;
top: -1px;
z-index: 1000;
width: 50%;
border-right: 0 none;
}
You could use clip on a pseudo element after the first box to get this working:
.box1:after {
content: "";
border:solid 1px;
background: #00d8ff;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: -1px;
left: -1px;
clip: rect(76px 32px 102px -1px);
}
FIDDLE
For more information about the css clip property see this mozilla page
It also has cross browser support
Split the left box in two sections, upper and lower section, and assign z-indexes accordingly.
How about somethign like this:
<div class="box2">
<div class="box-top"></div>
<div class="box-bot"></div>
</div>
## css ##
.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}
.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}
.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}
http://jsfiddle.net/a8fXP/30/