I have this html:
<div class="caption">
<h2>Sun Flower</h2>
<p class="meta-info-font">I took this photo at some bla bla bla.. and some other stuff.</p>
</div>
Why doesn't this work:
.caption {
position: absolute;
top: 40%;
left: 0;
right: 0;
background-color: rgba(20,19,19,0.94);
display: none;
}
.caption:hover {
display: block;
}
.caption {
position: absolute;
top: 40%;
left: 0;
right: 0;
background-color: rgba(20,19,19,0.94);
display: block; /* HERE */
}
.caption:hover {
display: none; /* HERE */
}
Simply your div was hidden by default.
try with
.caption {
position: absolute;
top: 40%;
left: 0;
right: 0;
background-color: rgba(20,19,19,0.94);
display: block;
}
.caption:hover {
display: none;
}
Try changing this:
.caption {
position: absolute;
top: 40%;
left: 0;
right: 0;
background-color: rgba(20,19,19,0.94);
display: block;
}
.caption:hover {
display: none;
}
Your div must be display:block, so when you hover on it, it can be display:none
I tried checking the CSS in chrome and FireFox and it does not seem to be cross browser compatible. Why don't you write up some javascript yo hide it on hover..
Fiddle
Related
I have a psuedo element which is a pink background inside a div like so:
<div>
Hello
</div>
div {
background-color: green;
display: inline-block;
padding: 20px;
position: relative;
}
div::after {
content: "";
background-color: pink;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Also here is a codepen to show what I mean: http://codepen.io/acha5066/pen/oXVPzg I want the pink background in front of the green background but behind the text Hello. How can I achieve this?
div {
background-color: green;
display: inline-block;
padding: 20px;
position: relative;
z-index: 0 /* we etablish a new stacking context */
}
div::after {
content: "";
background-color: pink;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1
}
<div>
Hello
</div>
A good article that will help you to understand the stacking context: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
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
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 have following css. I want to align image in center. But it is not working?
element.style {
}
.bx-wrapper .bxslider li img {
max-width: 100% !important;
height: auto !important;
}
.bxslider img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
}
.bx-wrapper img {
max-width: 100%;
}
img {
border: 0;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
HTML:
<ul class="bxslider" style="width: 860%; transform: translate3d(545.5px, 0px, 0px); vertical-align: middle; display: block; height: 465px; transition-duration: 0s;">
<li class="bxslider_imge bx-clone" style="float: left; list-style: none outside none; position: relative; width: 760px;">
<img alt="buk" src="/uploads/thumbs/52.jpg" data-image-original-path="/uploads/thumbs/52.jpg" title="Buk" data-image-thumb-path="/uploads/thumbs/52.jpg" data-image-id="17610" data-thumb-loaded="0">
</li>
<li class="bxslider_imge" style="float: left; list-style: none outside none; position: relative; width: 760px;">
<img alt="itc" src="/uploads/thumbs/e7.jpg" data-image-original-path="/uploads/thumbs/e7.jpg" title="ITC" data-image-thumb-path="/uploads/thumbs/e7.jpg" data-image-id="17607" data-thumb-loaded="1">
</li>
</ul>
To vertical align to middle, I like to use:
.elem {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Of course, you need all the vendor prefix (-webkit-transform, -moz-transform).
This is compatible with all majors browsers (IE9 and up)
I'm attempting to have an overlay of an image. I've done it a bit before but for some reason today I'm obviously forgetting something. It seems to take the width of the entire page and not its parent:
#work_item {
position: relative;
width: auto;
}
#work_item img {}
#work_item a {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
background: #000;
color: #FFF;
}
<div id='work_item'>
<img src="" />
Click Here!
</div>
Any Help?
#work_item {
display: inline-block;
position: relative;
left: 0px;
top: 0px;
z-index: 1;
height: auto;
width: auto;
}
#work_item img {
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
#work_item a {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 30;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
color: #FFF;
}
<div id='work_item'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" />
Click Here!
</div>
Demo: http://jsfiddle.net/38v3h/
Add this code, if you meant the #work_item:
#work_item {
position: relative;
width: auto;
display: inline-block;
}
Fiddle: http://jsfiddle.net/CRY3g/
div is a block element which occupy the whole width of the its parent regardless of the width of its content. There are many ways to make the div #work_item to wrap the content.
display inline-block;
#work_item {
position: relative;
width: auto;
display inline-block;
}
you can also float the div:
#work_item {
position: relative;
width: auto;
float: left;
}