I am creating a responsive website. I want to create below shape in CSS3. using ul li.
you could use a pseudo element, and have overflow:hidden set on the parent container.
html {
margin: 0;
padding: 0;
background: #222;
}
.wrap {
position: relative;
width: 100%;
height: 200px;
background: #222;
overflow: hidden;
}
.wrap div {
display: inline-block;
position: relative;
height: 100%;
width: 22%;
margin-left: 2%;
background: lightblue;
transition: all 0.6s;
line-height:200px;
text-align:center;
}
.wrap:before {
content: "";
position: absolute;
bottom: -25%;
left: 0;
height: 50%;
width: 100%;
border-radius: 50%;
background: #222;
z-index: 8;
}
div.withImage {
background: url(http://placekitten.com/g/300/300);
background-size: 100% 100%;
}
.wrap div:hover:before {
opacity: 1;
}
.wrap div:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: blue;
opacity: 0;
transition: all 0.6s;
}
<div class="wrap">
<div>ONE</div>
<div>TWO</div>
<div>THREE</div>
<div class="withImage">FOUR</div>
</div>
NOTE
This has been done using Divs. I have left it as an exercise for the OP to alter this code for ul li.
This can also be altered to include Dynamically added elements: JSFIDDLE
Related
Trying to create an overlay effect on hover, using :after, but it's not taking the full height.
It will work if I give a:after a fixed height in pixels. But I was hoping not to set a static height so it can be applied to images of all sizes.
Thanks in advance!
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
height: 100%;
width: 100%;
}
a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
I removed width: 100%; and height: 100% from a and added display: inline-block; By default a tags have a display value of inline which ignores width and height values so they weren't doing anything before anyway. display: inline-block; is probably what you wanted to go with from the beginning.
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
display: inline-block;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover::after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
<a> tag default display is display: inline.
To achieve the desired result you should display your <a> as inline-block. See docs: https://www.w3schools.com/css/css_inline-block.asp
a {
position: relative;
display: inline-block;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
display: inline-block;
}
a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
Your <a> element is not getting the full height, because by default is displayed as inline.
You can set display:inline-block; to change the default render behavior... or you can play with the position property.
Setting the container to position:relative, and the a and the a:after to position:absolute, will let you force the a:after to adjust to top:0px; and bottom:0px; covering the full height.
With that changes, everything works as expected.
Check it.
.container {
width: 500px;
height: 500px;
position: relative;
}
a {
position: absolute;
}
a:after {
content: '';
position: absolute;
width: 100%;
top: 0;
bottom: 0px;
background: rgba(0,0,0,0.4);
transition: all .4s;
-webkit-transition: all .4s;
opacity:0.2;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
add a display block:
a {
position: relative;
height: 100%;
width: 100%;
display:block;
}
I am trying to get the following transition of the h1 tag working for the border-bottom of the div. Here's what I've set up for the h1 tag:
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
h1:after {
position: absolute;
left: 50%;
content: '';
height: 5px;
background: blue;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
h1:hover:after {
width: 100%;
margin-left: -135px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
How do I make this work for the div border bottom? Here's what I came up with, and I see why it would't work (among other things the 'width' doesn't work for the border), but I can't figure out how to solve it.
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div:after {
border-bottom: 5px solid red;
left: 50%;
content: '';
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
div:hover:after {
width: 300px;
margin-left: -135px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
Thanks in advance.
Try this:
div {
position: relative;
display: inline-block;
}
h1 {
color: #666;
margin: 0;
}
div::after {
border-bottom: 5px solid red;
position: absolute;
left: 50%;
content: ' ';
transform: translateX(-50%);
transition: width 0.5s linear;
width: 0;
height: 0;
bottom: 0;
}
div:hover::after {
width: 100%
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
using this
div{
position:fixed;}
and remove margin-left it will work
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div{
position:fixed;}
div:after {
position: absolute;
left: 50%;
content: '';
height: 5px;
background: blue;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
div:hover:after {
width: 100%;
left:0;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
Try This:
div {
position: relative;<---Added
}
div:after {
position: absolute;<----Added
//more code....
}
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div {
position: relative;
}
div:after {
border-bottom: 5px solid red;
left: 50%;
content: '';
transition: all 0.5s linear;
width: 0;
bottom: 0;
position: absolute;
}
div:hover:after{
width: 300px;
margin-left: -155px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
#circle { width: 100px; height: 100px;
position: relative;
background: gray; opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 2;}
#line { display: block; position: relative;
width: 100%; height: 5px;
background: red; top: -50px;
z-index: 1;}
<div id="circle"></div>
<div id="line"></div>
How to make parts of the red line that stay behind the circle invisible? Without changing the opacity of the circle to 1.
You don't need a separate "line" div for this.
body {
overflow: hidden;
background:grey;
}
#circle {
width: 100px;
height: 100px;
position: relative;
background: rgba(0,255,0,0.5); /* semi-transparent green */
opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 2;
}
#circle:before,
#circle:after {
content: '';
position: absolute;
width: 50vw;
top:50%;
height: 5px;
}
#circle:before {
left:0;
transform:translate(-100%,-50%);
background:red;
}
#circle:after {
left:100%;
transform:translate(0,-50%);
background:blue;
}
<div id="circle"></div>
Put a your circle inside a white circle see fiddle https://jsfiddle.net/v61bguns/
HTML
<div id="circle2"><div id="circle"></div></div>
<div id="line"></div>
CSS
#circle2 { width: 100px; height: 100px;
position: relative;
background: white;
margin: 0 auto;
border-radius: 50%;
z-index: 2;}
#circle { width: 100px; height: 100px;
position: relative;
background: gray; opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 3;}
#line { display: block; position: relative;
width: 100%; height: 5px;
background: red; top: -50px;
z-index: 1;}
If I have three divs, each with fixed position. How can I get .inner to appear above the .overlay?
HTML
<div class="container">
<div class="inner">The inner container</div>
</div>
<div class="overlay"></div>
CSS
.container {
position: fixed;
z-index: 1;
background: red;
height: 100px;
width: 100%;
}
.inner {
z-index: 3;
position: fixed;
margin-top: 10px;
width: 100%;
background: yellow;
height: 30px;
}
.overlay {
z-index: 2;
position: fixed;
background: blue;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
In this JS fiddle, you can see how the "yellow" element renders below the overlay. Is there any change possible while keeping the .container fixed?
http://jsfiddle.net/4ne83oa4/8/
Well, if you must keep the markup as is, you can just play around with some pseudo classes for the .container class.
Markup stays the same, the CSS chages a bit like this: check js fiddle
.container {
position: fixed;
background: red;
height: 100px;
width: 100%;
z-index: 1;
}
.container:after,
.container:before{
content: '';
position: fixed;
}
.container:after{
z-index: -1;
background: red;
height: 100px;
width: 100%;
}
.container:before{
z-index: 1;
background: blue;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.inner {
position: fixed;
margin-top: 10px;
width: 100%;
background: yellow;
height: 30px;
z-index: 1;
}
I want to vertical center a text inside a responsive div but I really don't find the way to do it without new CSS3 tricks..
Here a fiddle : http://jsfiddle.net/M8rwn/
.iosSlider {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/* slider */
.iosSlider .Slider {
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .Slider .Slide {
float: left;
width: 100%;
}
.iosSlider .Slider .Slide img{
width: 100%;
height: auto;
}
.slider-prevContainer {
position: absolute;
top: 0;
left: 10px;
width: 50px;
height: 50%;
color: #595e62;
text-align: center;
}
.slider-nextContainer {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
opacity: 1;
color: #595e62;
background: blue;
}
.slider-next {
position:absolute;
height: 50%;
width: 100%;
top: 25%;
text-align: center;
vertical-align: middle;
background: red;
box-sizing: border-box;
font-size: 50px;
}
#single-slider {
float: left;
width: 500px;
height: 500px;
min-width: 0;
margin: 0;
border: none;
background: #000;
}
Okay, I think I have a solution.
Adjusted HTML:
<div class="slider-next">
<div id='slider-next-inner'>
>
</div>
</div>
Added CSS:
#slider-next-inner{
position:relative;
top:50%;
margin-top:-30px;
/* Margin-top is 1/2 the elements height (currently it is 59px) */
}
Link: http://jsfiddle.net/M8rwn/18/