I have a small camera store/website (jdsrde.com)
Currently updating and wanted to add a zoom effect so when you scroll(hover) over images the get zoomed view without clicking to product page.
Like a thumbnail, I have like 50 images.
The code works but for some reason the "zoom" image always goes behind the other images in the page. I wanted to see what I can do to fix this so that the "zoom" image goes to the front of the page layers.
I have changed the z-index so many times but to no avail
I feel so stupid as i have been trying to figure this out for hours now to no avail and I know the answer is so easy.
I dont want to use java i prefer css.
here is the codes im using. Any help would be gladly appreciated!!!
CSS>>>>
#zoom { position: relative; top: 10px; left: 10px; width: 75px; background-color: rgb(255, 255, 255); }
#zoom a.p1, #zoom a.p1:visited { border: 0pt none ; background: rgb(255, 255, 255) none repeat scroll 0%; display: block; width: 75px; height: 75px; text-decoration: none; top: 0pt; left: 0pt; }
#zoom a img { border: 0pt none ; }
#zoom a.p1:hover { text-decoration: none; background-color: rgb(140, 151, 163); color: rgb(0, 0, 0); }
#zoom a .large { border: 0px none ; display: block; position: fixed; width: 1px; height: 1px; top: -1px; left: -1px; }
#zoom a.p1:hover .large { border: 1px solid black; display: block; position: fixed; top: 0px; left: 250px; width: 300px; height: 200px; }
xhtml(of one of the images "zoom")>>>>>>
<div id="zoom" style="height: 106px; width: 150px; height: 106px; left: 1400px; position: absolute; top: 325px; width: 150px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 150px; ">
<a class="p1" href="Camera_Sears_35_RF.html" title="Camera_Sears_35_RF.html">
<img src="All2020_files/shapez" alt="" style="height: 106px; left: 0px; position: absolute; top: 0px; width: 150px; " />
<img class="large" src="All2020_files/z" title="Enlarged view of image" alt="Enlarged view of image" />
</a>
</div>
</div>
Thanks again!!
z-index only affects other positioned elements in the same 'stacking context'. Since the div inside #zoom is also positioned relative the z-index on the anchor has no effect.
Try applying the z-index the the div, not the anchor. So adding the following should help:
#zoom>div:hover {
z-index: 9;
}
Related
How can I make The Link-area like 3 px bigger than the image. I have made an audio-player with a 3px progressbar. But 3px are a bit small for a mouseclick and especially on mobiles. So how can I add like to link 3px to the top and to the bottom?
#gutter {
background: white;
height: 3px;
width: 100%;
position: absolute;
top: 87px;
z-index: 5;}
Try something like this: JSFiddle
I made up a simplified version to demonstrate the effect.
<img class="image" src=""/>
a.link {
display: inline-block;
margin: 0;
padding: 0;
}
img.image {
width: 3px;
height: 3px;
margin: 3px;
padding: 0;
}
I make use of many covered background-images.
If i use the same image within the page content area and inside the fixed left panel it flickers very heavy.
Reproduced:
http://jsfiddle.net/7aUnL/8/
HTML:
<div class="wrapper">
<div class="inner">
<div class="header cover">
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="image cover"></div>
</div>
</div>
</div>
<div class="flickermaker">
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="icon cover"></div>
</div>
CSS:
div.wrapper {
float: left;
width: 100%;
}
div.inner{
margin-bottom: 120px;
margin-left: 252px;
margin-right: 12px;
position: relative;
}
div.header {
display: inline-block;
margin-bottom: 10px;
min-height: 140px;
overflow: hidden;
padding-bottom: 8px;
position: relative;
width: 100%;
}
div.image {
bottom: 0;
box-shadow: -3px 0 5px 3px rgb(0, 0, 0);
float: left;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 140px;
z-index: 2;
}
.cover {
background-color: rgb(248, 248, 248);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
div.flickermaker{
border-right: 1px solid rgb(205, 205, 205);
bottom: 0;
height: auto;
left: 0;
margin-left: 0;
top: 0;
z-index: 999;
font-size: 0.85em;
overflow: hidden;
width: 240px;
position: fixed !important;
}
.icon {
border-left: 3px solid rgba(114, 184, 251, 0.4);
height: 100%;
left: -3px;
position: absolute;
transition: border-color 0.3s ease 0s;
width: 50px;
height:50px;
}
Without the small icon the problem disappears. Any suggestions?
Edit: with a smaller version of the same image everything is fine:
http://jsfiddle.net/nxU3s/1/
The "flickering" image is a 1.6MB 1920x1080 file, most likely some browsers are not yet ready to deal with this range of dimensions (Firefox flickers, Chrome does not). Background-size is a pretty new property so don't expect perfect support in such extreme cases.
Anyway I can't see a serious real life application of your example. Use thumbnails instead of high definition images. You also need to clean your markup which is quite a nonsense.
In the end consider the <img> tag who will be most of the time easier to use .
I'm trying to make a link image.
everything works with link but when I add a 2nd image to show when hover - then a strange border shows around it. Any ideas how to avoid the border?
I cant add a pics here so look here:
http://postimg.org/image/7q0jkc99t/
in html:
<div id="Oobj14">
<a href="formularz.html"><img id="Ggeo9" class="przed" onmouseover="this.className='po'"
onmouseout="this.className='przed'" alt=""></div>
in css:
.przed{
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
.po{
background: url('image/dolacz2.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
and for the image:
#Oobj14 {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
}
img#Ggeo9 {
width: 100%;
height: 100%;
opacity:1.0;
Why use javascript at all? I'd throw away the images and simply use backgrounds. Use CSS :hover to switch to another background
HTML:
<div id="Oobj14">
Descriptive text
</div>
CSS:
#Oobj14 a {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
overflow:hidden;
text-indent:-2000px;
}
#Oobj14 a {
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
#Oobj14 a:hover {
background: url('image/dolacz2.png') no-repeat;
}
I need to get a speech bubble that looks something like this via CSS:
I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.
I looked through some examples, but I don't know how to change the height! Here is the code I have:
<style>
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: gray;
margin-left:50px;
}
.bubble:after
{
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}
</style>
<div class="bubble"></div>
Here is JSBin
Make
top: 40%;
bottom: 50%;
in your .bubble:after in CSS script
You have to check it by changing the .bubble height
I was looking at a post here and noticed that the snapshots have a side label bar and a botton horizontal bar for labeling contents.
How can this be achieved using CSS?
Update: I am talking about the cross-bar in the first image that says "snapshot" and "WP Advanced Code Editor"!
Try this - http://jsfiddle.net/hEeZA/
HTML
<div class="container">
<span class="diag"> Some text </span>
<span class="horiz"> Some text </span>
</div>
CSS
div {
height: 300px;
width: 400px;
background: beige;
overflow: hidden;
position: relative;
}
span {
width: 200px;
display: inline-block;
height: 30px;
line-height: 30px;
color: #fff;
background: orange;
text-align: center;
position: absolute;
}
.horiz {
bottom: 40px;
}
.diag {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
right: -50px;
top: 30px
}
My demo can be seen here http://dabblet.com/gist/3152262
I have an image wrapper with overflow:hidden and I've simply used a :before pseudo-element which I've rotated and absolutely positioned. Same idea for the horizontal one.
HTML
<a href="#" class="img-wrapper">
<img src="img.jpg">
</a>
CSS
.img-wrapper {
width: 400px;
height: 300px;
box-shadow: 1px 1px 3px #000;
display: block;
overflow: hidden;
position: relative;
}
.img-wrapper:before, .img-wrapper:after {
padding: .3em 2.9em;
position: absolute;
background: blue;
color: white;
font: 700 14px sans-serif;
}
.img-wrapper:before {
top: 35px;
right: -40px;
transform: rotate(45deg);
content: 'Screenshot';
}
.img-wrapper:after {
top: 85%;
content: 'Developer Formatter'
}