I am trying to change the z-index of the image posts that when you hover over them, it comes in front and cover the big white text.
Not sure what I'm doing wrong here...
http://hkumbrella.tumblr.com/
Image post css:
#post img {
width:100%;
z-index: -100;
}
#post img:hover {
opacity:1;
z-index: 100000 !important;
White text css(2014):
.subtitle2{
top:45%;
left:2%;
font-family:arimo;
font-weight:bold;
color: white;
text-transform:uppercase;
font-size:75px;
letter-spacing:-3px;
text-align:center;
position: fixed;
z-index:100;
color: #FFFFFF !important;
{block:Permalink}display:none;{/block:Permalink}
}
Set #wrapper's z-index higher then 100.
All the images are inside #wrapper div, and its z-index is less then its sibling .subtiles, so even if you set higher z-index for children of #wrapper, it won't come in front.
and you are using #post multiple at places in your page. you are not suppose to use id multiple places, instead use classes, they are meant for that only.
Related
I've been searching but haven't found an answer for the specific problem I'm having.
I wanted to use sliding captions for the images on my art blog. The challenge was that I needed the container to adapt to variable image heights so I didn't have to go in and set it manually every time I post something new. What I have so far is really close to working but...
The div is 5 pixels bigger than the image, regardless of the image's height. I made the div background red so it's easy to see the overlap, but I just can't figure out where those 5 pixels are coming from.
I'm really new at this and changed all the css values I could think of and searched for other examples but I still couldn't get the overlap to go away. Any help would be awesome. I'm so close (I think) but I don't know what else to try. Here's most of the css with a jsfiddle link below:
/* variable container adapts to image size (plus 5 unwanted pixels) */
/* I made the background red so you can see where it's too big */
div#imgContainer {
min-width: 20px;
min-height: 20px;
display:inline-block;
background:red;
}
.postContainer {
position:relative;
overflow:hidden;
background: red;
}
.postContainer .postTextbox {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
margin-bottom:-15%;
margin-left:auto;
margin-right:auto;
opacity: 0;
border:0px;
background: black;
}
.postContainer:hover .postTextbox {
margin-bottom:0;
opacity: 1;
}
.postTextbox {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
http://jsfiddle.net/nun243j1/
Thanks again in advance!
It may be because of white-space between elements. Apply image {display: block;} for images to remove this problem.
I'm trying to make a circular button with a character centered inside (in this case, a right-pointing arrow for a next button). I've gotten it vertically centered by adjusting the element's line-height, but I can't find a way to move it over to the side.
I tried adding both literal and unicode (\0020) space characters and that didn't move the triangle at all. Padding and margin don't work on the :after selector, and don't have the desired effect if applied to the element itself.
Here's the 'rendered' code, according to firebug (I'm using SASS, so pasting the actual code would leave out all the mixin definitions and such).
.flowbar--nav-image__next:after {
content: "▸";
}
.flowbar--nav-image:after {
color: white;
font-size: 19px;
}
.flowbar--nav-image {
background-color: #018FD6;
background-image: -moz-linear-gradient(center top , #93E3F7, #018FD6);
border-radius: 50% 50% 50% 50%;
display: inline-block;
height: 25px;
line-height: 25px;
width: 25px;
}
And the actual HTML:
<span class="flowbar--nav-image flowbar--nav-image__next"></span>
And here's what gets rendered:
This will work:
.flowbar--nav-image__next:after {
content: "▸";
display:block;
margin-left:10px;
}
http://jsfiddle.net/qTXFJ/1/
Or, instead, you could simply adjust the text alignment, which means you don't have to figure out the pixels yourself:
.flowbar--nav-image {
text-align:center;
}
http://jsfiddle.net/qTXFJ/3/
I want to increase the size of some images when hovering over them.
Please have a look at the example below. It's the option Test (3rd image):
http://livingfunky.webresponsive.co.uk/index.php/curtains/hand-made-curtains/test-hand-made-curtain.html
.swatches-container .swatch-img,
.swatches-container .swatch-span {
margin:0 2px 2px 0;
}
.swatches-container .swatch-img {
border:1px solid #eee;
max-width:30px;
max-height:28px;
z-index: 0;
position: relative;
}
.swatches-container .swatch-img.current {
border:2px solid #333;
}
.swatches-container .swatch-span {}
.swatch-img:hover {
border:1px solid #eee;
max-width:60px;
max-height:46px;
left:10px;
cursor:pointer;
top: -20px;
left: -20px;
}
The problem I have is that when I hover over the third image, the div moves. How can I prevent this from happening?
Thanks
The deal is that you need to have your images positioned as absolute, so that the swatches-container is not resized if they get bigger.
Thus, you can put your images into a <div class="swatch-img-block"></div> which keep having the size of the little image, so the flow isn't modified by your growing image and your images will be absolute positioned relatively to these <div>
You can do this with this CSS:
.swatches-container .swatch-img-block
{
display:inline-block; /* displayed as inline elements */
position: relative; /* so the images can be positioned relatively to this */
width:30px; /* keeping the image size */
height:28px;
}
and by adding position:absolute in .swatch-img:hover{ }.
EDIT: looks like for compatibility issues, it is better to replace .swatch-img:hover selector by .swatch-img-block:hover .swatch-img. This way, the image is made bigger if the pointer is on the <div> containing the image (the space of the image when it is little). Also, it avoids problems with images moving out of the pointer.
Here is a working jsFiddle : LINK
you can set the img to absolute positionning when hovered, also the swatches-container have to be relatively positioned :
.swatches-container
{
position:relative;
}
.swatch-img:hover {
position:absolute;
}
I am using the following CSS on anchor tags with specific classes. Works OK except that long link text is forced into new lines. I guess this has to do with the width...
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
try this
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
height:100%;
width:100%;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
you need to maximize the width for that use 100% width or maximum width your design allow you.
a.interactive {
/*...*/
white-space: nowrap;
}
I have a 'floating' fixed position div which is shown onclick of a label. Within the fixed div is a form button.
Now, because its possible that the div could be shown anywhere on a page, and as a user scrolls the page under it, I give it an opacity of say 0.8. But, I still want the button inside the div at full opacity (1) but its not resetting the button opacity.
Here's the css
#delHolder {
width:280px;
text-align:center;
position:fixed;
background:#fff;
opacity:0.8;
height:60px;
top:150px;
left:50%;
margin-left:-140px;
z-index:2322;
border-radius:8px;
}
#multiDel { position:relative; z-index:232323; opacity:1.0; }
.className { opacity:1.0; }
html is something like:
<div id="delHolder"><input type="submit" class="className" id="multiDel"></div>
How can I only have transparency on holder div?
instead of
opacity:0.8;
background: #fff;
use
background-color: rgba(255, 255, 255, 0.8);
In this way the opacity applied on the parent won't be inherited from children.
Note: rgba() won't work on IE<=8